:root {
  color-scheme: dark;
  --blog-surface: #07111f;
  --blog-card: #ffffff;
  --blog-ink: #132033;
  --blog-muted: #667085;
  --blog-line: rgba(148, 163, 184, .24);
  --blog-blue: #2563eb;
}
.blog-body { background: var(--blog-surface); }
.blog-main,.article-main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.blog-hero { padding: 72px 0 44px; max-width: 820px; }
.blog-eyebrow,.blog-meta { color: #60a5fa; font-size: 12px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.blog-hero h1,.article-header h1,.blog-card h2,.article-content h2,.article-content h3 { letter-spacing: 0; }
.blog-hero h1 { max-width: 760px; margin: 12px 0 16px; color: #f8fafc; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.12; font-weight: 760; }
.blog-hero>p:last-child { max-width: 680px; margin: 0; color: #cbd5e1; font-size: 18px; line-height: 1.7; }
.blog-topics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: 0 0 38px; }
.blog-topics a { min-width: 0; padding: 18px; border: 1px solid rgba(96,165,250,.24); border-radius: 8px; background: rgba(15,23,42,.72); color: #f8fafc; text-decoration: none; }
.blog-topics a:hover { border-color: rgba(96,165,250,.58); background: rgba(22,34,57,.92); }
.blog-topics strong,.blog-topics span { display: block; }
.blog-topics strong { margin-bottom: 7px; font-size: 17px; line-height: 1.3; }
.blog-topics span { color: #aebed0; font-size: 14px; line-height: 1.55; }
.topic-hero .article-back { margin-bottom: 22px; }
.topic-feature-link { display: inline-flex; margin-top: 22px; color: #93c5fd; font-weight: 760; text-decoration: none; }
.topic-feature-link:hover { color: #ffffff; }
.blog-index { margin: 0 auto 86px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.blog-card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--blog-line); border-radius: 8px; background: var(--blog-card); box-shadow: 0 18px 44px rgba(2, 6, 23, .18); }
.blog-card-image { display: block; height: 186px; overflow: hidden; background: #e8eef8; color: #64748b; text-decoration: none; }
.blog-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-card-copy { min-height: 0; flex: 1; display: flex; flex-direction: column; padding: 22px; }
.blog-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #64748b; }
.blog-meta span { color: var(--blog-blue); }
.blog-card h2 { margin: 13px 0 10px; color: var(--blog-ink); font-size: 22px; line-height: 1.25; font-weight: 760; }
.blog-card h2 a,.blog-read,.article-back { text-decoration: none; }
.blog-card p { flex: 1; margin: 0 0 20px; color: var(--blog-muted); font-size: 15.5px; line-height: 1.65; }
.blog-read { color: var(--blog-blue); font-size: 15px; font-weight: 760; }
.blog-empty { grid-column: 1 / -1; padding: 52px; border: 1px solid var(--blog-line); border-radius: 8px; text-align: center; background: #ffffff; }
.blog-article { padding: 60px 0 92px; }
.article-header { max-width: 820px; margin: 0 auto; text-align: center; }
.article-back { display: inline-block; margin-bottom: 28px; color: #93c5fd; font-weight: 760; }
.article-header .blog-meta { justify-content: center; }
.article-header h1 { margin: 18px auto; max-width: 820px; color: #f8fafc; font-size: clamp(30px, 3.7vw, 46px); line-height: 1.16; font-weight: 760; }
.article-deck { margin: 0 auto; max-width: 720px; color: #cbd5e1; font-size: 18px; line-height: 1.7; }
.article-author { margin: 18px 0 0; color: #94a3b8; font-size: 14px; font-weight: 650; }
.article-hero-image { margin: 42px auto 42px; max-width: 960px; }
.article-hero-image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--blog-line); box-shadow: 0 24px 70px rgba(2, 6, 23, .28); }
.article-content { max-width: 760px; margin: 0 auto; padding: 42px; border: 1px solid rgba(226, 232, 240, .88); border-radius: 8px; background: #ffffff; color: #233047; font-size: 17px; line-height: 1.78; }
.article-content h2,.article-content h3 { margin: 2em 0 .65em; color: #111827; line-height: 1.25; font-weight: 760; }
.article-content h2 { font-size: 27px; }
.article-content h3 { font-size: 22px; }
.article-content p,.article-content ul,.article-content ol,.article-content blockquote { margin: 0 0 1.2em; }
.article-content ul,.article-content ol { padding-left: 1.35em; }
.article-content li { margin-bottom: .45em; }
.article-content a { color: #155bd5; font-weight: 700; text-decoration-thickness: .08em; text-underline-offset: .16em; }
.article-content img { max-width: 100%; height: auto; border-radius: 8px; }
.article-content blockquote { margin-left: 0; padding: 8px 0 8px 20px; border-left: 4px solid var(--blog-blue); color: #475467; }
.related-guides { margin-top: 34px; padding-top: 8px; border-top: 1px solid #e5e7eb; }
.related-guides h2 { margin-top: 1.2em; }
.article-related { max-width: 760px; margin: 30px auto 0; padding: 28px; border: 1px solid var(--blog-line); border-radius: 8px; background: #ffffff; color: var(--blog-ink); }
.article-related-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.article-related-head p { margin: 0 0 5px; color: var(--blog-blue); font-size: 12px; font-weight: 760; text-transform: uppercase; }
.article-related-head h2 { margin: 0; font-size: 23px; line-height: 1.25; }
.article-related-head>a { color: var(--blog-blue); font-weight: 730; text-decoration: none; white-space: nowrap; }
.article-related-links { display: grid; gap: 10px; }
.article-related-links>a { display: grid; gap: 5px; padding: 14px 0; border-top: 1px solid #e5e7eb; color: var(--blog-ink); text-decoration: none; }
.article-related-links span { color: #64748b; font-size: 12px; font-weight: 720; text-transform: uppercase; }
.article-related-links strong { font-size: 16px; line-height: 1.4; }
.article-feature-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 18px; padding: 16px; border-radius: 8px; background: #eff6ff; }
.article-feature-cta p { margin: 0; color: #334155; line-height: 1.5; }
.article-feature-cta a { color: #155bd5; font-weight: 760; text-decoration: none; white-space: nowrap; }
.article-tags { max-width: 760px; margin: 28px auto 0; display: flex; flex-wrap: wrap; gap: 8px; }
.article-tags span { padding: 7px 11px; border-radius: 999px; background: rgba(37, 99, 235, .14); color: #dbeafe; font-size: 13px; font-weight: 700; }
@media (max-width: 940px) { .blog-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .blog-main,.article-main { width: min(100% - 24px, 1180px); }
  .blog-hero { padding: 46px 0 30px; }
  .blog-topics { grid-template-columns: minmax(0,1fr); }
  .blog-index { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .blog-card-image { height: 176px; }
  .blog-card-copy { padding: 19px; }
  .blog-card h2 { font-size: 20px; }
  .blog-article { padding: 44px 0 72px; }
  .article-content { padding: 26px 20px; font-size: 16.5px; }
  .article-content h2 { font-size: 24px; }
  .article-related { padding: 22px 18px; }
  .article-related-head,.article-feature-cta { align-items: flex-start; flex-direction: column; }
  .article-related-head>a,.article-feature-cta a { white-space: normal; }
}

/* Public blog refresh, July 2026 */
:root {
  color-scheme: light;
  --blog-surface: #ffffff;
  --blog-card: #ffffff;
  --blog-ink: #0f172a;
  --blog-muted: #64748b;
  --blog-line: #e2e8f0;
  --blog-blue: #2563eb;
  --blog-violet: #7c3aed;
  --blog-cyan: #06b6d4;
}
.blog-body {
  background:
    radial-gradient(circle at 14% 4%, rgba(37, 99, 235, .13), transparent 28rem),
    radial-gradient(circle at 86% 10%, rgba(124, 58, 237, .11), transparent 30rem),
    linear-gradient(180deg, #ffffff 0%, #f0f4ff 34%, #ffffff 100%);
}
.blog-main,
.article-main {
  width: min(1220px, calc(100% - 32px));
}
.blog-hero {
  max-width: 900px;
  padding: 82px 0 46px;
}
.blog-eyebrow {
  display: inline-flex;
  width: fit-content;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  padding: 7px 12px;
  background: linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%);
  color: #1d4ed8;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .08);
  text-transform: none;
  letter-spacing: 0;
}
.blog-hero h1,
.article-header h1 {
  color: #0f172a;
  font-weight: 880;
}
.blog-hero h1 {
  max-width: 850px;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.04;
}
.blog-hero>p:last-child,
.article-deck {
  color: #64748b;
}
.blog-topics a {
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .06);
}
.blog-topics a:hover {
  border-color: #bfdbfe;
  background: #ffffff;
  box-shadow: 0 22px 54px rgba(15, 23, 42, .10);
  transform: translateY(-2px);
}
.blog-topics span {
  color: #64748b;
}
.blog-card {
  border-color: #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 20px 52px rgba(15, 23, 42, .08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.blog-card:hover {
  transform: translateY(-3px);
  border-color: #bfdbfe;
  box-shadow: 0 26px 64px rgba(37, 99, 235, .13);
}
.blog-card-image {
  background:
    linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(124, 58, 237, .12)),
    #eef2ff;
}
.blog-card-image span {
  display: grid;
  height: 100%;
  place-items: center;
  color: #1d4ed8;
  font-weight: 850;
}
.blog-meta {
  color: #64748b;
}
.blog-meta span {
  border-radius: 999px;
  padding: 5px 9px;
  background: #dbeafe;
  color: #1d4ed8;
}
.blog-card h2 {
  color: #0f172a;
}
.blog-read,
.article-back,
.topic-feature-link {
  color: #2563eb;
}
.blog-empty {
  border-color: #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .06);
}
.article-header {
  max-width: 900px;
}
.article-back {
  border-radius: 999px;
  padding: 8px 12px;
  background: #eff6ff;
}
.article-author {
  color: #64748b;
}
.article-hero-image img {
  border-color: #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .14);
}
.article-content {
  border-color: #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 20px 54px rgba(15, 23, 42, .08);
}
.article-related {
  border-color: #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .06);
}
.article-feature-cta {
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background: linear-gradient(135deg, #eff6ff, #f5f3ff);
}
.article-tags span {
  background: #dbeafe;
  color: #1d4ed8;
}

/* Single article alignment: keep media and body on one visual grid. */
.blog-article {
  --article-wide: min(960px, 100%);
  --article-body: var(--article-wide);
  --article-text: 720px;
}
.article-header {
  max-width: var(--article-body);
}
.article-hero-image {
  max-width: var(--article-wide);
}
.article-content,
.article-related,
.article-tags {
  max-width: var(--article-body);
}
.article-content {
  padding: clamp(34px, 4vw, 52px);
}
.article-content > :where(p, ul, ol, blockquote, h2, h3, h4, figure, table) {
  max-width: var(--article-text);
  margin-left: auto;
  margin-right: auto;
}
.article-content > :where(img, .article-feature-cta, .related-guides) {
  max-width: 100%;
}
.article-content :where(p, li) {
  font-weight: 400;
}
.article-content :where(h2, h3) {
  font-weight: 650;
}
.article-related {
  padding: clamp(24px, 3vw, 34px);
}
@media (max-width: 620px) {
  .blog-main,
  .article-main {
    width: min(100% - 24px, 1180px);
  }
  .blog-hero {
    padding-top: 50px;
  }
  .article-content {
    padding: 26px 20px;
  }
}