/* The blog on fintology.ai (Build 25). The approved design is docs/seo/blog/PREVIEW-blog-*.html,
   made by docs/seo/blog/gen_blog.py; this is that generator's CSS, translated:
   - every rule is scoped to .blog, so nothing leaks into the site header and footer (base.html);
   - site.css starts with Tailwind's preflight (no list bullets, headings at inherited weight,
     links with no underline, figure margins zeroed). The design relies on browser defaults
     for those, so they are put back here, inside .blog only;
   - fonts are the self-hosted Archivo / IBM Plex Mono (never Google's hosts:
     website/test_external_assets.py);
   - the preview's own top bar and footer are not reproduced: the site's are used. */
@font-face{font-family:Archivo;src:url(fonts/archivo-var-latin.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-400-latin.woff2) format("woff2");font-weight:400 500;font-style:normal;font-display:swap}
html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* site.css gives html AND body overflow-x:hidden, which makes body a scroll container that
   never scrolls - and silently switches off position:sticky (the "On this page" TOC).
   clip cuts the same overflow without making a scroll container; a browser without clip
   keeps site.css's hidden (TOC just scrolls away). Blog pages only. */
body{overflow-x:clip}

.blog{--deep:#0E2A1D;--accent:#1E7A4F;--accent-h:#17633F;--tint:#E8F5EE;--edge:#CFE6D9;--bg:#FFFFFF;--soft:#F4F8F6;--page:#EEF3F0;
--ink:#101A15;--body:#33403A;--muted:#5B6660;--faint:#8A968F;--line:#E3EAE6;--mint:#8FC9A9;
--f:Archivo,'Helvetica Neue',Helvetica,Arial,sans-serif;--m:'IBM Plex Mono',Menlo,Consolas,monospace;
background:var(--bg);color:var(--ink);font-family:var(--f);-webkit-font-smoothing:antialiased;line-height:normal;color-scheme:light;padding-bottom:60px}
.blog *{box-sizing:border-box}
/* preflight, undone */
.blog h1,.blog h2,.blog h3{font-weight:700;letter-spacing:normal}
.blog a{color:var(--accent);text-decoration:underline}.blog a:hover{color:var(--accent-h)}
.blog :focus-visible{outline:3px solid #1E7A4F66;outline-offset:2px}
.blog article ul{list-style:disc}.blog article ol{list-style:decimal}

.blog .wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.blog .crumbs{font-size:13px;color:var(--muted);padding:22px 0 0}.blog .crumbs a{color:var(--muted);text-decoration:none}.blog .crumbs a:hover{color:var(--accent)}
.blog .eyebrow{font-family:var(--m);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.blog .post-head{max-width:800px;padding:26px 0 8px}
.blog .post-head h1{font-size:clamp(32px,4.6vw,50px);line-height:1.06;letter-spacing:-.03em;margin:12px 0 14px;text-wrap:balance}
.blog .dek{font-size:19px;line-height:1.55;color:var(--body);margin:0 0 20px;max-width:62ch}
.blog .byline{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted);flex-wrap:wrap}
.blog .av{width:40px;height:40px;border-radius:50%;background:var(--deep);color:#fff;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.blog .byline b{color:var(--ink)}
.blog .hero{margin:26px 0 10px;border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.blog .hero img{display:block;width:100%;height:auto}
.blog .layout{display:grid;grid-template-columns:minmax(0,720px) 260px;gap:56px;justify-content:space-between;padding:22px 0 10px}
.blog .layout.solo{grid-template-columns:minmax(0,720px)}
.blog .toc{position:sticky;top:84px;align-self:start;font-size:14px}
.blog .toc .eyebrow{display:block;margin-bottom:10px;color:var(--muted)}
.blog .toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.blog .toc a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--body);text-decoration:none;line-height:1.35}
.blog .toc a:hover{color:var(--accent);border-left-color:var(--accent)}
.blog .toc .mini{margin-top:18px;background:var(--soft);border-radius:12px;padding:14px;font-size:13.5px;line-height:1.5;color:var(--body)}
.blog .toc .mini a{display:inline;border:0;padding:0;margin:0;color:var(--accent);font-weight:600}
.blog article{font-size:18px;line-height:1.72;color:var(--body)}
.blog article h2{font-size:28px;line-height:1.2;letter-spacing:-.02em;color:var(--ink);margin:46px 0 12px;scroll-margin-top:90px;text-wrap:balance}
.blog article h2.small{font-size:20px}
.blog article h3{font-size:20px;color:var(--ink);margin:28px 0 8px}
.blog article p{margin:0 0 18px}
.blog article ul,.blog article ol{margin:0 0 20px;padding-left:22px}
.blog article li{margin:0 0 8px}
.blog article strong{color:var(--ink)}
.blog .takeaways{background:var(--soft);border-radius:16px;padding:22px 24px;margin:0 0 8px}
.blog .takeaways .eyebrow{display:block;margin-bottom:10px}
.blog .takeaways ul{list-style:none;padding:0;margin:0}
.blog .takeaways li{display:flex;gap:12px;margin:0 0 10px;font-size:16.5px;line-height:1.55}
.blog .tick{width:20px;height:20px;border-radius:50%;background:#fff;color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none;margin-top:3px;box-shadow:inset 0 0 0 1px var(--edge)}
.blog .tbl{overflow-x:auto;margin:0 0 22px;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.blog article table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5;min-width:520px}
.blog article th{text-align:left;font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--soft);padding:12px 14px;font-weight:500}
.blog article td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top}
.blog .fig{margin:6px 0 28px}
.blog .fig img{width:100%;height:auto;display:block;border-radius:14px;box-shadow:0 0 0 1px var(--line)}
.blog .fig figcaption{font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:10px}
.blog .fig figcaption .credit{display:block;font-size:12.5px;margin-top:2px;opacity:.85}
.blog .now{font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:var(--tint);color:var(--accent);padding:4px 8px;border-radius:6px;vertical-align:middle;margin-left:8px;white-space:nowrap}
.blog .updated{color:var(--accent);font-weight:600}
.blog .callout{background:var(--tint);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;padding:16px 18px;margin:0 0 22px;font-size:16.5px}
.blog .note{background:#FDF8EC;border-left:3px solid #D79A3E;border-radius:0 12px 12px 0;padding:14px 18px;margin:0 0 22px;font-size:15.5px;color:#4A3B1C}
.blog .cta-card{margin:40px 0;border-radius:18px;background:var(--deep);color:#fff;padding:28px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;position:relative;overflow:hidden}
.blog .cta-card::after{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;background:radial-gradient(closest-side,#1E7A4F88,transparent)}
.blog .cta-card .eyebrow{color:var(--mint)}
.blog .cta-card h3{font-size:24px;line-height:1.2;margin:8px 0 6px;color:#fff;letter-spacing:-.01em}
.blog .cta-card p{margin:0;color:#D7EFE2;font-size:15.5px;line-height:1.55}
.blog .btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 22px;border-radius:10px;background:var(--accent);color:#fff!important;font-weight:600;font-size:15.5px;text-decoration:none;white-space:nowrap;position:relative;z-index:1}
.blog .btn:hover{background:var(--accent-h)}
.blog .cta-card .btn{background:#fff;color:var(--deep)!important}
.blog .faq details{border-bottom:1px solid var(--line);padding:4px 0}
.blog .faq summary{cursor:pointer;list-style:none;padding:14px 32px 14px 0;font-weight:600;color:var(--ink);position:relative;font-size:17px}
.blog .faq summary::-webkit-details-marker{display:none}
.blog .faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:22px;color:var(--accent)}
.blog .faq details[open] summary::after{content:"\2013"}
.blog .faq details p{margin:0 0 14px;font-size:16.5px}
.blog .sources{font-size:14.5px;line-height:1.55}.blog .sources li{margin-bottom:6px}
.blog .author{display:flex;gap:16px;align-items:flex-start;background:var(--soft);border-radius:16px;padding:20px;margin:36px 0 0}
.blog .author .av{width:52px;height:52px;font-size:18px;color:#fff}
.blog .author b{display:block;color:var(--ink);font-size:16px}.blog .author span{font-size:13.5px;color:var(--muted)}.blog .author p{margin:6px 0 0;font-size:15px;line-height:1.55}
.blog .disclaimer{font-size:13px;color:var(--faint);line-height:1.55;margin-top:24px}
.blog .related{padding:30px 0 10px}
.blog .related h2{font-size:22px;margin:0 0 14px}
.blog .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.blog .card{border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px var(--line);text-decoration:none;color:inherit;display:flex;flex-direction:column;background:#fff;transition:box-shadow .15s,transform .15s}
.blog .card:hover{box-shadow:0 0 0 1px var(--edge),0 18px 36px -22px rgba(14,42,29,.35);transform:translateY(-2px)}
.blog .card img{width:100%;height:auto;display:block;aspect-ratio:1200/630;object-fit:cover}
.blog .card .c{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px}
.blog .card b{font-size:18px;line-height:1.3;color:var(--ink);letter-spacing:-.01em}
.blog .card span{font-size:14px;color:var(--muted);line-height:1.5}
.blog .card small{font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
/* index */
.blog .bi-hero{background:linear-gradient(160deg,#EAF6EF 0%,#F7FBF8 60%,#FFFFFF 100%);position:relative;overflow:hidden}
.blog .bi-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#1E7A4F0D 1px,transparent 1px),linear-gradient(90deg,#1E7A4F0D 1px,transparent 1px);background-size:40px 40px}
.blog .bi-hero .in{position:relative;max-width:1180px;margin:0 auto;padding:44px 20px 40px}
.blog .bi-hero h1{font-size:clamp(32px,4.4vw,48px);letter-spacing:-.03em;line-height:1.06;margin:10px 0 10px;max-width:16ch;color:var(--ink)}
.blog .bi-hero p{font-size:18px;line-height:1.55;color:var(--body);max-width:56ch;margin:0}
.blog .chips{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 0}
.blog .chips a{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font-size:14px;color:var(--body);text-decoration:none;font-weight:600}
.blog .chips a[aria-current]{background:var(--deep);border-color:var(--deep);color:#fff}
.blog .featured{display:grid;grid-template-columns:1.2fr 1fr;gap:0;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px var(--line);text-decoration:none;color:inherit;margin:34px 0 26px;background:#fff}
.blog .featured img{width:100%;height:100%;object-fit:cover;display:block}
.blog .featured .c{padding:30px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.blog .featured b{font-size:28px;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.blog .featured span{font-size:16px;color:var(--body);line-height:1.55}
.blog .featured span.meta{font-size:14px;color:var(--muted)}
.blog .empty{margin:34px 0;color:var(--muted)}
.blog .wrap>.disclaimer{margin:0 0 10px}
@media (max-width:980px){.blog .layout{grid-template-columns:minmax(0,1fr)}.blog .toc{position:static;order:-1;display:none}.blog .featured{grid-template-columns:1fr}}
@media (max-width:640px){.blog article{font-size:17px}.blog article h2{font-size:24px}.blog .cta-card{grid-template-columns:1fr}.blog .cta-card .btn{width:100%}.blog .dek{font-size:17px}}