/* Vital Apps blog styles: shared by /blog and /blog/<slug> pages */
:root{
  --teal:#00BFA5; --navy:#1E3A8A; --emerald:#059669; --emerald-dark:#047857;
  --ink:#18181b; --muted:#52525b; --line:#e4e4e7; --soft:#ecfdf5;
}
.hero-bg{ background:linear-gradient(135deg,var(--teal) 0%,var(--navy) 100%); }

/* ---------- Article hero ---------- */
.post-hero{ color:#fff; padding:56px 24px 64px; }
.post-hero-inner{ max-width:1120px; margin:0 auto; display:grid; gap:40px; align-items:center; grid-template-columns:1fr; }
@media (min-width:900px){ .post-hero-inner{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); } }
.post-hero h1{ font-size:clamp(2rem,4.2vw,3.25rem); line-height:1.12; font-weight:700; letter-spacing:-0.02em; margin:14px 0 18px; }
.post-meta{ font-size:1.05rem; color:#d1fae5; }
.post-meta span{ margin:0 .35em; }
.cat-pill{ display:inline-block; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); color:#fff; font-weight:600; font-size:.95rem; padding:6px 14px; border-radius:999px; }
.back-link-light{ display:inline-block; color:#d1fae5; font-weight:600; margin-bottom:18px; text-decoration:none; }
.back-link-light:hover{ color:#fff; text-decoration:underline; }
.hero-emoji{ justify-self:center; width:clamp(150px,22vw,240px); aspect-ratio:1; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:clamp(4.5rem,9vw,7.5rem); background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),rgba(255,255,255,.08)); border:2px solid rgba(255,255,255,.35); box-shadow:0 20px 60px rgba(0,0,0,.18); }
.hero-img{ width:100%; height:auto; border-radius:20px; border:4px solid rgba(255,255,255,.35); box-shadow:0 20px 60px rgba(0,0,0,.25); }
@media (max-width:899px){ .hero-emoji{ display:none; } }

/* ---------- Readable body ---------- */
.prose-wrap{ max-width:72ch; margin:0 auto; padding:48px 22px 24px; }
.post-body{ font-size:19px; line-height:1.75; color:var(--ink); }
@media (min-width:768px){ .post-body{ font-size:20px; } }
.post-body p{ margin:0 0 1.15em; }
.post-body h2{ font-size:1.6em; line-height:1.25; font-weight:700; margin:1.9em 0 .6em; letter-spacing:-0.01em; }
.post-body h3{ font-size:1.22em; line-height:1.3; font-weight:700; margin:1.6em 0 .45em; color:#064e3b; }
.post-body ul, .post-body ol{ margin:0 0 1.2em; padding-left:1.4em; }
.post-body ul{ list-style:disc; } .post-body ol{ list-style:decimal; }
.post-body li{ margin:.4em 0; }
.post-body li::marker{ color:var(--emerald); }
.post-body strong{ font-weight:700; }
.post-body a{ color:var(--emerald-dark); text-decoration:underline; text-underline-offset:3px; }
.post-body em{ font-style:italic; }

/* Boxes */
.box-title{ font-weight:700; font-size:1.1em; margin:0 0 .5em; color:#064e3b; }
.takeaways{ background:var(--soft); border:1px solid #a7f3d0; border-left:6px solid var(--emerald); border-radius:20px; padding:24px 26px 10px; margin:0 0 2em; }
.takeaways h2.box-title{ font-size:1.15em; margin:0 0 .4em; }
.takeaways ul{ margin-bottom:.8em; }
.callout{ background:#f0fdfa; border:1px solid #99f6e4; border-radius:20px; padding:22px 26px 8px; margin:1.8em 0; }
.callout .box-title{ color:#115e59; }
.pullquote{ margin:2em 0; padding:8px 0 8px 26px; border-left:6px solid var(--teal); }
.pullquote p{ font-size:1.35em; line-height:1.45; font-weight:600; color:var(--navy); margin:0; }
.video-wrap{ margin:1.6em 0 2em; }
.video-frame{ padding:6px; border-radius:24px; box-shadow:0 20px 50px rgba(0,0,0,.18); }
.video-frame video{ display:block; width:100%; height:auto; aspect-ratio:16/9; border-radius:18px; background:#000; }
.video-wrap figcaption{ text-align:center; color:var(--muted); font-size:.85em; margin-top:.6em; }

/* CTA */
.cta-box{ color:#fff; border-radius:28px; padding:34px 30px; margin:2.6em 0 2em; box-shadow:0 20px 50px rgba(30,58,138,.25); }
.cta-eyebrow{ text-transform:uppercase; letter-spacing:.08em; font-size:.85rem; font-weight:700; color:#a7f3d0; margin:0 0 6px; }
.cta-box h2{ font-size:2rem; line-height:1.2; font-weight:700; margin:0 0 10px; }
.cta-box p{ font-size:1.15rem; line-height:1.6; color:#ecfdf5; margin:0 0 20px; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.cta-primary{ background:#fff; color:var(--emerald-dark); font-weight:700; font-size:1.15rem; padding:16px 30px; border-radius:24px; text-decoration:none; box-shadow:0 10px 25px rgba(0,0,0,.15); transition:transform .15s; }
.cta-primary:hover{ transform:scale(1.04); }
.cta-secondary{ color:#fff; font-weight:600; font-size:1.1rem; text-decoration:underline; text-underline-offset:4px; }

/* Disclaimer + sources */
.disclaimer{ background:#fffbeb; border:1px solid #fde68a; border-radius:16px; padding:18px 22px; font-size:1.02rem; line-height:1.6; color:#713f12; margin:0 0 2.2em; }
.sources h2{ font-size:1.5rem; font-weight:700; margin:0 0 .6em; }
.sources ol{ list-style:decimal; padding-left:1.4em; font-size:1rem; line-height:1.55; color:#3f3f46; }
.sources li{ margin:.5em 0; }
.sources a{ color:var(--emerald-dark); text-decoration:underline; text-underline-offset:2px; word-break:break-word; }
.sources-note{ font-size:.92rem; color:var(--muted); margin-top:1em; }
.back-row{ margin:2.2em 0 0; }
.back-link{ display:inline-block; font-weight:700; font-size:1.1rem; color:var(--emerald-dark); border:2px solid var(--emerald); border-radius:24px; padding:12px 22px; text-decoration:none; }
.back-link:hover{ background:var(--soft); }

/* Related */
.related{ background:#fff; border-top:1px solid var(--line); margin-top:56px; padding:56px 24px 72px; }
.related-inner{ max-width:1120px; margin:0 auto; }
.related h2{ font-size:2rem; font-weight:700; margin:0 0 24px; }
.related-grid{ display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:768px){ .related-grid{ grid-template-columns:repeat(3,1fr); } }
.related-card{ display:flex; flex-direction:column; gap:10px; background:#fff; border:1px solid var(--line); border-radius:24px; padding:0 0 24px; overflow:hidden; text-decoration:none; color:var(--ink); transition:box-shadow .2s; }
.related-card:hover{ box-shadow:0 20px 40px rgba(0,0,0,.08); }
.related-thumb{ height:130px; display:flex; align-items:center; justify-content:center; font-size:3.4rem; background:linear-gradient(135deg,#34d399,#14b8a6); }
.related-meta{ color:var(--emerald); font-weight:600; font-size:.95rem; padding:6px 24px 0; }
.related-title{ font-size:1.25rem; line-height:1.35; font-weight:700; padding:0 24px; }

/* Blog index helpers */
.filter-btn{ padding:.75rem 1.5rem; border:1px solid #d4d4d8; border-radius:1.5rem; font-weight:500; font-size:1.05rem; background:#fff; }
.filter-btn:hover{ background:#f4f4f5; }
.filter-btn.is-active{ background:var(--emerald); border-color:var(--emerald); color:#fff; }
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
:focus-visible{ outline:3px solid #f59e0b; outline-offset:3px; }
@media print{ header, footer, .related, .cta-box{ display:none !important; } .post-hero{ color:#000; background:none; } }