/* Blog pages share the landing navigation and color system. */
.blog-page { background:#fff; color:#111827; }
.blog-page .wrap { max-width:1120px; margin:0 auto; padding-left:24px; padding-right:24px; }
.blog-page .blog-hero { padding:132px 0 60px; background:radial-gradient(circle at 85% 0%,rgba(22,163,74,.11),transparent 42%),linear-gradient(180deg,#f7fcf8 0%,#fff 100%); border-bottom:1px solid #e5eee8; }
.blog-page .eyebrow { color:#15803d; font-weight:700; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; }
.blog-page .blog-hero h1 { max-width:850px; margin:18px 0; font-size:clamp(2.25rem,4.5vw,3.75rem); line-height:1.12; letter-spacing:-.045em; font-weight:800; }
.blog-page .lede { max-width:790px; color:#4b5563; font-size:1.125rem; line-height:1.75; }
.blog-page .meta { max-width:790px; margin-top:22px; color:#6b7280; font-size:.86rem; line-height:1.6; }
.blog-page .blog-index { padding-top:54px; padding-bottom:88px; }
.blog-page .blog-index-hero { padding-bottom:44px; text-align:center; }
.blog-page .blog-index-hero h1 { max-width:none; margin:0; }
.blog-page .blog-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.blog-page .blog-card { position:relative; display:block; overflow:hidden; color:#111827; background:#fff; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 12px 30px rgba(18,41,25,.065); text-decoration:none; transition:transform .22s,box-shadow .22s,border-color .22s; }
.blog-page .blog-card:hover { transform:translateY(-4px); border-color:#9dddaf; box-shadow:0 20px 42px rgba(18,41,25,.13); text-decoration:none; }
.blog-page .blog-card:focus-visible { outline:3px solid #22c55e; outline-offset:4px; }
.blog-page .blog-card-cover { display:block; overflow:hidden; aspect-ratio:16/9; background:#0d2a20; }
.blog-page .blog-card-cover img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.blog-page .blog-card:hover .blog-card-cover img { transform:scale(1.035); }
.blog-page .blog-card-content { position:relative; display:block; min-height:104px; padding:18px 48px 20px 20px; }
.blog-page .blog-card-content h2 { margin:0; font-size:1.08rem; line-height:1.35; letter-spacing:-.022em; font-weight:750; }
.blog-page .blog-card-arrow { position:absolute; right:18px; bottom:19px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:#15803d; background:#e8f7ed; font-size:1.2rem; line-height:1; }
.blog-page .layout { display:grid; grid-template-columns:minmax(0,750px) 250px; gap:58px; padding-top:54px; padding-bottom:88px; }
.blog-page article { min-width:0; }
.blog-page article h2 { margin:48px 0 16px; font-size:1.7rem; line-height:1.3; font-weight:700; letter-spacing:-.03em; }
.blog-page article h3 { margin:30px 0 10px; font-size:1.13rem; line-height:1.4; font-weight:650; }
.blog-page article p,.blog-page article li { color:#4b5563; line-height:1.8; }
.blog-page article p { margin-bottom:16px; }
.blog-page article a,.blog-page aside a,.blog-page .blog-footer a { color:#15803d; text-decoration:none; }
.blog-page article a:hover,.blog-page aside a:hover,.blog-page .blog-footer a:hover { text-decoration:underline; }
.blog-page .answer { background:#f0fdf4; border:1px solid #bbebc8; border-left:4px solid #16a34a; border-radius:0 16px 16px 0; padding:24px 26px; }
.blog-page .answer h2 { margin:0 0 8px; font-size:1.25rem; }
.blog-page .answer p { margin:0; }
.blog-page .table-wrap { overflow:auto; border:1px solid #e5e7eb; border-radius:16px; background:#fff; }
.blog-page table { width:100%; min-width:560px; border-collapse:collapse; }
.blog-page th,.blog-page td { padding:16px; text-align:left; vertical-align:top; border-bottom:1px solid #e5e7eb; line-height:1.55; }
.blog-page th { background:#f0fdf4; color:#166534; font-size:.88rem; font-weight:700; }
.blog-page tr:last-child td { border-bottom:0; }
.blog-page td:first-child { width:24%; color:#111827; font-weight:700; }
.blog-page aside { align-self:start; position:sticky; top:96px; font-size:.88rem; }
.blog-page aside .card,.blog-page .related-card { display:block; background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:22px; box-shadow:0 4px 16px rgba(0,0,0,.035); }
.blog-page aside .card strong { color:#111827; }
.blog-page aside ol { padding-left:20px; margin-top:14px; line-height:1.85; }
.blog-page .faq-item { border-top:1px solid #e5e7eb; padding:8px 0 12px; }
.blog-page .faq-item h3 { margin-bottom:6px; }
.blog-page .sources { padding-left:20px; }
.blog-page .related { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.blog-page .related-card { color:#111827; font-weight:700; line-height:1.45; transition:border-color .2s,box-shadow .2s,transform .2s; }
.blog-page .related-card:hover { border-color:#86d69b; box-shadow:0 10px 26px rgba(22,163,74,.10); transform:translateY(-2px); }
.blog-page .related-card small { display:block; margin-top:10px; color:#6b7280; font-weight:400; line-height:1.6; }
.blog-page .cta { margin-top:44px; padding:32px; background:#f0fdf4; border:1px solid #bbebc8; border-radius:20px; }
.blog-page .cta h2 { margin:0 0 8px; }
.blog-page .cta p { color:#4b5563; }
.blog-page .buttons { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.blog-page .buttons a { display:inline-flex; align-items:center; padding:11px 16px; background:#16a34a; border-radius:10px; color:#fff; font-weight:700; }
.blog-page .buttons a:hover { background:#15803d; text-decoration:none; }
.blog-page .blog-footer { border-top:1px solid #e5e7eb; background:#f9fafb; padding:28px 0; color:#6b7280; font-size:.86rem; }
.blog-page .blog-footer .wrap { display:flex; justify-content:space-between; gap:16px; }
.dark .blog-page { background:#0a0a0a; color:#f3f4f6; }
.dark .blog-page .blog-hero { background:radial-gradient(circle at 85% 0%,rgba(22,163,74,.14),transparent 42%),linear-gradient(180deg,#101a12 0%,#0a0a0a 100%); border-color:#262626; }
.dark .blog-page .eyebrow,.dark .blog-page article a,.dark .blog-page aside a,.dark .blog-page .blog-footer a { color:#4ade80; }
.dark .blog-page .lede,.dark .blog-page .meta,.dark .blog-page article p,.dark .blog-page article li,.dark .blog-page .related-card small,.dark .blog-page .cta p { color:#9ca3af; }
.dark .blog-page .answer,.dark .blog-page .cta { background:#102016; border-color:#1d5030; }
.dark .blog-page .table-wrap,.dark .blog-page aside .card,.dark .blog-page .related-card { background:#141414; border-color:#262626; }
.dark .blog-page .blog-card { background:#141414; border-color:#27352d; color:#f3f4f6; }
.dark .blog-page .blog-card-arrow { color:#86efac; background:#193525; }
.dark .blog-page th { background:#102016; color:#86efac; }
.dark .blog-page th,.dark .blog-page td,.dark .blog-page .faq-item { border-color:#262626; }
.dark .blog-page td:first-child,.dark .blog-page aside .card strong,.dark .blog-page .related-card { color:#f3f4f6; }
.dark .blog-page .blog-footer { background:#0f0f0f; border-color:#262626; }
.dark .blog-page .buttons a { color:#fff; }
@media(max-width:860px){ .blog-page .layout { display:block; } .blog-page aside { position:static; margin-top:40px; } }
@media(max-width:980px){ .blog-page .blog-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px){ .blog-page .blog-card-grid { grid-template-columns:1fr; gap:20px; } }
@media(max-width:580px){ .blog-page .wrap { padding-left:18px; padding-right:18px; } .blog-page .blog-hero { padding-top:112px; padding-bottom:42px; } .blog-page .blog-hero h1 { font-size:2.1rem; } .blog-page .related { grid-template-columns:1fr; } .blog-page .blog-footer .wrap { display:block; } }
@media(max-width:580px){ .blog-page .blog-index { padding-top:26px; padding-bottom:60px; } .blog-page .blog-index-hero { padding-bottom:28px; } .blog-page .blog-card-content { min-height:100px; padding:18px 48px 20px 20px; } .blog-page .blog-card-arrow { right:18px; bottom:19px; } }