.blog-page {
  color-scheme: only light;
  --fj-blog-ink: #20213f;
  --fj-blog-ink-soft: #41445d;
  --fj-blog-muted: #62657b;
  --fj-blog-paper: #fbfaf7;
  --fj-blog-surface: #ffffff;
  --fj-blog-surface-soft: #f4f1f8;
  --fj-blog-violet: #5146d8;
  --fj-blog-violet-dark: #3c34ae;
  --fj-blog-violet-light: #ece9ff;
  --fj-blog-border: rgba(32,33,63,.16);
  --fj-blog-radius-lg: 28px;
  --fj-blog-radius-md: 18px;
  background: var(--fj-blog-paper);
  color: var(--fj-blog-ink);
}
.blog-page h1,.blog-page h2,.blog-page h3,.blog-page strong { color:var(--fj-blog-ink); }
.blog-page a { color:inherit; }
.blog-page [hidden] { display:none!important; }
.blog-page .site-header { background:var(--fj-blog-paper); border-color:var(--fj-blog-border); }
.blog-page .site-footer { background:var(--fj-blog-surface); border-color:var(--fj-blog-border); }
.blog-page .brand small,.blog-page .footer-brand p,.blog-page .footer-links { color:var(--fj-blog-muted); }
.blog-page .footer-links a { color:var(--fj-blog-violet-dark); }
.blog-page { min-height: 100vh; }
.blog-nav { display:flex; gap:24px; font-size:14px; font-weight:600; }
.blog-nav a { text-decoration:none; padding:12px 0; }
.blog-nav a[aria-current] { color:var(--fj-blog-violet); }
.skip-link { position:fixed; top:-100px; left:12px; z-index:100; padding:12px; background:var(--fj-blog-ink); color:white; }
.skip-link:focus { top:12px; }
.blog-page a:focus-visible { outline:3px solid var(--fj-blog-violet); outline-offset:5px; }
.blog-main { width:min(1180px,calc(100% - 40px)); margin:auto; padding:72px 0 60px; }
.blog-hero { max-width:780px; margin-bottom:64px; }
.blog-category { display:inline-block; color:var(--fj-blog-violet-dark); font-size:13px; font-weight:600; }
.blog-hero h1,.article-heading h1 { font-family:"Bricolage Grotesque",sans-serif; font-size:clamp(36px,5vw,64px); line-height:1.1; letter-spacing:-1.8px; font-weight:600; margin:18px 0 24px; }
.blog-hero h1 em { font-style:normal; color:var(--fj-blog-violet); }
.blog-hero p { font-size:18px; color:var(--fj-blog-ink-soft); line-height:1.7; }
.blog-section-title { font-family:"Bricolage Grotesque",sans-serif; font-size:26px; font-weight:600; margin-bottom:24px; }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:24px; }
.blog-card { display:flex; flex-direction:column; min-width:0; padding:24px; border:1px solid var(--fj-blog-border); border-radius:var(--fj-blog-radius-lg); background:var(--fj-blog-surface); }
.blog-card h2 { font-family:"Bricolage Grotesque",sans-serif; font-size:28px; line-height:1.2; font-weight:600; margin:20px 0 14px; }
.blog-card h2 a { text-decoration:none; }
.blog-card h2 a:hover { color:var(--fj-blog-violet); }
.blog-card p { color:var(--fj-blog-ink-soft); line-height:1.75; font-size:15px; }
.card-bottom { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:auto; padding-top:24px; align-items:center; font-size:13px; }
.card-bottom time { color:var(--fj-blog-ink-soft); }
.card-bottom a,.article-body a,.article-meta a,.breadcrumbs a { color:var(--fj-blog-violet-dark); text-underline-offset:4px; }
.blog-callout { margin-top:48px; background:var(--fj-blog-violet-light); border-radius:var(--fj-blog-radius-lg); padding:32px; display:flex; gap:32px; align-items:center; justify-content:space-between; }
.blog-callout h2,.article-cta h2 { font-family:"Bricolage Grotesque",sans-serif; font-weight:600; margin:0 0 12px; }
.blog-callout p { color:var(--fj-blog-ink-soft); max-width:600px; line-height:1.7; margin:0; }
.blog-button { display:inline-block; flex-shrink:0; padding:15px 22px; background:var(--fj-blog-violet); color:white!important; border-radius:14px; text-decoration:none; font-size:14px; font-weight:600; }
.blog-button:hover { background:var(--fj-blog-violet-dark); }
.article-main { width:min(1100px,calc(100% - 40px)); margin:auto; padding:32px 0 64px; }
.breadcrumbs { display:flex; gap:10px; flex-wrap:wrap; color:var(--fj-blog-ink-soft); font-size:13px; line-height:1.6; margin-bottom:48px; }
.article-heading { max-width:850px; }
.article-heading h1 { font-size:clamp(34px,5vw,56px); }
.article-intro { font-size:19px; line-height:1.75; color:var(--fj-blog-ink-soft); }
.article-meta { color:var(--fj-blog-ink-soft); font-size:13px; line-height:1.8; margin:24px 0 48px; }
.article-layout { display:grid; grid-template-columns:240px minmax(0,700px); gap:56px; align-items:start; }
.article-toc { position:sticky; top:110px; border-left:2px solid var(--fj-blog-violet-light); padding-left:20px; }
.article-toc h2 { font-size:14px; font-weight:600; }
.article-toc ol { list-style:none; padding:0; margin:0; }
.article-toc li { margin:16px 0; font-size:13px; line-height:1.6; }
.article-toc a { color:var(--fj-blog-ink-soft); text-decoration:none; }
.article-toc a:hover { color:var(--fj-blog-violet); }
.article-body section { scroll-margin-top:110px; margin-bottom:40px; }
.article-body h2 { font-family:"Bricolage Grotesque",sans-serif; font-size:28px; font-weight:600; line-height:1.25; margin:0 0 18px; }
.article-body p { font-size:16px; line-height:1.85; color:var(--fj-blog-ink-soft); }
.article-cta { padding:28px; background:var(--fj-blog-violet-light); border-radius:var(--fj-blog-radius-md); margin:40px 0 28px; }
@media(max-width:760px) {
 .blog-main { padding:40px 0; width:calc(100% - 32px); }
 .blog-hero { margin-bottom:40px; }
 .blog-hero h1,.article-heading h1 { letter-spacing:-1px; }
 .blog-nav { gap:16px; font-size:13px; }
 .blog-page .header-inner { gap:16px; }
 .blog-page .brand small { display:none; }
 .blog-page .brand strong { font-size:16px; }
 .blog-page .brand img { width:34px; height:34px; }
 .blog-card { padding:24px; }
 .blog-callout { flex-direction:column; align-items:flex-start; padding:24px; }
 .article-main { width:calc(100% - 32px); padding-top:24px; }
 .breadcrumbs { margin-bottom:32px; }
 .article-layout { grid-template-columns:1fr; gap:32px; }
 .article-toc { position:static; padding:16px 20px; background:var(--fj-blog-surface-soft); border:0; border-radius:var(--fj-blog-radius-md); }
 .article-intro { font-size:17px; }
 .article-meta { margin-bottom:32px; }
 .blog-page .footer-links { flex-wrap:wrap; gap:14px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.blog-card-image { display:block; width:100%; height:180px; object-fit:cover; border-radius:14px; margin:0 0 24px; }
.article-image { margin:0 0 40px; }
.article-image img { display:block; width:100%; height:auto; border-radius:18px; }
.article-image figcaption { margin-top:10px; color:var(--fj-blog-muted); font-size:12px; }
.blog-page .blog-card,.blog-page .blog-callout,.blog-page .article-cta { color:var(--fj-blog-ink); }

.blog-hero h1,.article-heading h1,.blog-card h2 { overflow-wrap:anywhere; }
@media(max-width:380px) {
 .blog-page .header-inner { flex-wrap:wrap; gap:4px 16px; padding-block:10px; }
 .blog-nav { margin-left:auto; }
}

.blog-page .blog-card-link,.blog-page .back-link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 16px; border:1px solid var(--fj-blog-violet-dark); border-radius:10px; color:var(--fj-blog-violet-dark); font-size:14px; font-weight:600; text-decoration:none; }
.blog-page .blog-card-link:hover,.blog-page .back-link:hover { background:var(--fj-blog-violet-light); text-decoration:underline; text-underline-offset:4px; }

.blog-controls { display:flex; flex-wrap:wrap; gap:20px; margin-bottom:16px; }
.blog-control-field { display:flex; flex-direction:column; gap:8px; flex:1 1 220px; max-width:340px; min-width:0; font-size:14px; font-weight:600; }
.blog-controls select { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--fj-blog-border); border-radius:10px; background:var(--fj-blog-surface); color:var(--fj-blog-ink); font:inherit; }
.blog-controls select:focus-visible { outline:3px solid var(--fj-blog-violet); outline-offset:3px; }
.blog-result-count { color:var(--fj-blog-ink-soft); font-size:14px; margin:0 0 20px; }

.article-body ul { padding-left:24px; color:var(--fj-blog-ink-soft); line-height:1.85; }
.article-body li + li { margin-top:10px; }
.article-summary { padding:24px; margin-bottom:40px; background:var(--fj-blog-surface-soft); border-radius:var(--fj-blog-radius-md); }
.article-summary h2 { font-size:24px; }
.article-summary ul { margin-bottom:0; }
.article-sources { border-top:1px solid var(--fj-blog-border); padding-top:28px; }
.article-sources a { overflow-wrap:anywhere; }

.article-body h3 { font-size:20px; line-height:1.4; margin:28px 0 12px; }
.article-body code { overflow-wrap:anywhere; white-space:normal; font-size:.9em; }
.article-table { max-width:100%; overflow-x:auto; margin:24px 0; border:1px solid var(--fj-blog-border); border-radius:12px; }
.article-table table { border-collapse:collapse; width:100%; font-size:14px; line-height:1.6; }
.article-table caption { text-align:left; font-weight:600; padding:14px; background:var(--fj-blog-surface-soft); }
.article-table th,.article-table td { text-align:left; padding:12px; border-bottom:1px solid var(--fj-blog-border); vertical-align:top; min-width:120px; }
.article-table thead { background:var(--fj-blog-surface-soft); }
.article-table:focus-visible { outline:3px solid var(--fj-blog-violet); outline-offset:3px; }
.article-editorial-notes { margin-bottom:32px; padding:24px; background:var(--fj-blog-surface-soft); border:1px dashed var(--fj-blog-border); border-radius:12px; overflow-wrap:anywhere; }
.article-body { min-width:0; }

/* Ad blocks. The affiliate variant reuses .affiliate-card from the calculator's offer page (GLOBAL_CSS). */
.article-promo { margin:40px 0; }
.article-promo--internal { padding:28px; background:var(--fj-blog-violet-light); border-radius:var(--fj-blog-radius-md); color:var(--fj-blog-ink); }
.article-promo-label { color:var(--fj-blog-violet-dark); font-size:13px; font-weight:600; }
.article-body .article-promo-heading { margin:8px 0 10px; font-family:"Bricolage Grotesque",sans-serif; font-size:24px; font-weight:600; line-height:1.3; color:var(--fj-blog-ink); }
.article-body .article-promo--internal p:not(.article-promo-heading) { margin:0 0 20px; }
.article-body .article-promo .affiliate-card { min-height:0; color:var(--fj-blog-ink); text-decoration:none; }
.article-body .article-promo .affiliate-card:focus-visible { outline:3px solid var(--fj-blog-violet); outline-offset:4px; }
.article-body .article-promo .affiliate-name { margin:24px 0 7px; font-family:"Bricolage Grotesque",sans-serif; font-size:30px; font-weight:700; letter-spacing:-.5px; line-height:1.2; color:var(--fj-blog-ink); }
.article-body .article-promo .affiliate-desc { min-height:0; margin:0; font-size:14px; line-height:1.55; }
.article-body .article-promo .legal-example { margin:0; padding-top:18px; font-size:12px; line-height:1.6; color:var(--fj-blog-muted); }
.article-body .article-promo .affiliate-note { margin:10px 0 0; font-size:12px; line-height:1.6; color:var(--fj-blog-muted); }
@media(max-width:760px) { .article-body .article-promo .affiliate-card { padding:20px; } .article-promo--internal { padding:24px; } }