/* Case study pages: extends blog-post.css */
.cs-section-label { font-family: var(--ff-poppins); font-size: var(--fs-8); color: var(--accent-color, var(--orange-yellow-crayola)); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.cs-diagram { margin: 28px 0; padding: 18px; background: var(--onyx); border: 1px solid var(--jet); border-radius: 14px; overflow-x: auto; }
.cs-diagram svg { display: block; width: 100%; min-width: 520px; height: auto; color: var(--text-primary, #fafafa); font-family: var(--ff-poppins); }
.cs-diagram figcaption { margin-top: 10px; font-family: var(--ff-poppins); font-size: var(--fs-8); color: var(--text-muted); }
.cs-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 18px 0 28px; padding: 0; list-style: none; }
.cs-results li { background: var(--onyx); border: 1px solid var(--jet); border-radius: 14px; padding: 16px; font-family: var(--ff-poppins); }
.cs-results strong { display: block; font-size: 22px; white-space: nowrap; color: var(--accent-color, var(--orange-yellow-crayola)); margin-bottom: 4px; }
.cs-results span { font-size: var(--fs-8); color: var(--text-muted); }
.cs-nav { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--jet); font-family: var(--ff-poppins); font-size: var(--fs-7); }
.cs-nav a { color: var(--accent-color, var(--orange-yellow-crayola)); }
.cs-more ul { margin: 10px 0 14px; }
.cs-more a, .cs-cta a { color: var(--accent-color, var(--orange-yellow-crayola)); }
.cs-cta { margin-top: 36px; padding: 22px; background: var(--onyx); border: 1px solid var(--jet); border-radius: 14px; font-family: var(--ff-poppins); }
.cs-cta h2 { margin-top: 0 !important; }
.cs-cta-btn { display: inline-block; margin-right: 12px; padding: 10px 18px; border-radius: 12px; background: var(--orange-yellow-crayola); color: var(--smoky-black, #121212) !important; font-weight: 500; text-decoration: none; }