/* The SEO blog (app/blog.py). Same ground as the legal pages: matte graphite,
   ivory ink, mint-teal highlight, Playfair headlines over Inter. */
.blog{--b-ink:#f0efe9;--b-ink2:#a7a6a0;--b-muted:#77756f;--b-line:rgba(167,243,208,.14);--b-hl:#4fd1ae;
  min-height:100vh;padding:132px 24px 96px;color:var(--b-ink);
  background:radial-gradient(900px 480px at 10% 0%,rgba(79,209,174,.08),transparent 68%),linear-gradient(180deg,#141416 0%,#161618 40%,#121213 100%)}
.blog a{color:inherit}
.blog-hero{max-width:880px;margin:0 auto 56px}
.blog-kicker,.blog-meta{font:500 11px/1.4 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--b-muted)}
.blog-hero h1{margin:18px 0 0;font:400 clamp(44px,7vw,84px)/1 'Playfair Display',serif;letter-spacing:-.02em}
.blog-hero h1 em,.blog-article h1 em{font-style:italic;color:var(--b-hl)}
.blog-hero p{max-width:620px;margin:22px 0 0;font:400 18px/1.6 Inter,sans-serif;color:var(--b-ink2)}
.blog-list{max-width:880px;margin:0 auto;display:grid;gap:14px}
.blog-card{display:grid;grid-template-columns:260px 1fr;gap:22px;align-items:center;padding:14px;border:1px solid var(--b-line);border-radius:18px;
  background:rgba(255,255,255,.02);text-decoration:none;transition:border-color .2s,background .2s}
.blog-card:hover{border-color:rgba(79,209,174,.45);background:rgba(79,209,174,.04)}
.blog-card img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;border-radius:12px;display:block}
.blog-card h2{margin:8px 0 6px;font:400 26px/1.15 'Playfair Display',serif}
.blog-card p{margin:0;font:400 15px/1.55 Inter,sans-serif;color:var(--b-ink2)}
.blog-card:not(:has(img)){grid-template-columns:1fr}
.blog-article{max-width:720px;margin:0 auto}
.blog-crumbs{font:500 12px/1 Inter,sans-serif;color:var(--b-muted);margin-bottom:26px}
.blog-crumbs a{text-decoration:none}.blog-crumbs a:hover{color:var(--b-hl)}
.blog-article h1{margin:0;font:400 clamp(38px,6vw,60px)/1.05 'Playfair Display',serif;letter-spacing:-.015em}
.blog-lede{margin:20px 0 14px;font:400 20px/1.55 Inter,sans-serif;color:var(--b-ink2)}
.blog-figure{margin:30px 0 8px}
.blog-figure img{width:100%;height:auto;border-radius:18px;display:block}
.blog-figure figcaption{margin-top:10px;font:400 13px/1.5 Inter,sans-serif;color:var(--b-muted)}
.blog-body{font:400 18px/1.75 Inter,sans-serif;color:#dddcd6}
.blog-body h2{margin:46px 0 12px;font:400 32px/1.15 'Playfair Display',serif;color:var(--b-ink)}
.blog-body h3{margin:30px 0 8px;font:600 19px/1.3 Inter,sans-serif;color:var(--b-ink)}
.blog-body p{margin:0 0 18px}
.blog-body ul,.blog-body ol{margin:0 0 20px;padding-left:22px}
.blog-body li{margin:6px 0}
.blog-body strong{color:var(--b-ink)}
.blog-body a{color:var(--b-hl);text-decoration:underline;text-underline-offset:3px}
.blog-body blockquote{margin:24px 0;padding:16px 20px;border-left:3px solid var(--b-hl);background:rgba(79,209,174,.06);border-radius:0 12px 12px 0;color:var(--b-ink)}
.blog-body code{font:500 15px/1.5 'Geist Mono',ui-monospace,monospace;background:rgba(255,255,255,.06);padding:2px 6px;border-radius:6px}
.blog-body table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
.blog-body th,.blog-body td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--b-line)}
.blog-body th{color:var(--b-muted);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.blog-cta{margin:48px 0 0;padding:26px;border:1px solid rgba(79,209,174,.35);border-radius:20px;background:linear-gradient(115deg,rgba(167,243,208,.07),rgba(15,118,110,.07))}
.blog-cta b{display:block;font:400 28px/1.1 'Playfair Display',serif}
.blog-cta p{margin:10px 0 18px;font:400 16px/1.6 Inter,sans-serif;color:var(--b-ink2)}
.blog-btn{display:inline-flex;align-items:center;height:44px;padding:0 22px;border-radius:999px;background:linear-gradient(100deg,#a7f3d0,#4fd1ae 55%,#2fa58c);
  color:#111113 !important;font:600 15px/1 Inter,sans-serif;text-decoration:none}
.blog-related{max-width:720px;margin:64px auto 0}
.blog-related > h2{font:400 28px/1.1 'Playfair Display',serif;margin:0 0 16px}
.blog-related .blog-card h2{font-size:20px}
@media (max-width:720px){
  .blog{padding:104px 16px 72px}
  .blog-card{grid-template-columns:1fr;gap:12px}
  .blog-body{font-size:17px}
  .blog-body h2{font-size:27px}
}