/* Blog index + article pages reuse .terms-text (already defined in app.css) for
   long-form typography — same look as the legal pages, no need to redefine H2/P/UL styles. */

.breadcrumbs{font-size:14px;color:#79798a;margin-bottom:16px}
.breadcrumbs a{color:#79798a;text-decoration:underline}
.breadcrumbs a:hover{color:#0a63db}

.blog-hero{background:#f8f9fc;padding:60px 0 40px;text-align:center}
.blog-hero h1{font-family:"Proxima Nova BOLD",sans-serif;font-weight:700;font-size:42px;line-height:50px;color:#201f35;margin:0 0 10px}
.blog-hero p{font-size:18px;line-height:28px;color:#79798a;margin:0}

.blog-list{background:#f8f9fc;padding:60px 0 100px}
.blog-featured{max-width:1000px;margin:0 auto 30px}
.blog-featured .blog-card{width:auto;padding:36px}
.blog-featured .blog-card-badge{display:inline-block;background:#3ed27e;color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 12px;border-radius:100px;margin-bottom:14px;align-self:flex-start}
.blog-featured h2{font-size:28px;line-height:34px}
.blog-featured p{font-size:16px;line-height:26px}
.blog-list .blog-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:30px;max-width:1000px;margin:0 auto}
.blog-list .blog-card{width:auto}
.blog-card{display:flex;flex-direction:column;background:#fff;box-shadow:0 6px 20px rgba(192,192,192,0.25);border-radius:16px;padding:30px;width:340px;text-align:left}
.blog-card .blog-card-date{font-size:13px;color:#79798a;margin-bottom:10px}
.blog-card h2{font-family:"Proxima Nova BOLD",sans-serif;font-weight:700;font-size:22px;line-height:28px;color:#201f35;margin:0 0 12px}
.blog-card p{font-size:15px;line-height:24px;color:#79798a;margin:0 0 16px}
.blog-card a.read-more{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:#0a63db;text-decoration:none;margin-top:auto}
.blog-card a.read-more:hover{color:#084a9e}

.blog-compare-cta{max-width:700px;margin:50px auto 0;text-align:center;background:#fff;box-shadow:0 6px 20px rgba(192,192,192,0.25);border-radius:16px;padding:40px 30px}
.blog-compare-cta h2{font-family:"Proxima Nova BOLD",sans-serif;font-weight:700;font-size:24px;line-height:30px;color:#201f35;margin:0 0 10px}
.blog-compare-cta p{font-size:16px;line-height:26px;color:#79798a;margin:0 0 20px}
.blog-compare-cta a.read-more{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:#0a63db;text-decoration:none}
.blog-compare-cta a.read-more:hover{color:#084a9e}

/* Shared arrow icon (same file, mirrored for the opposite direction) — recolors via
   currentColor so link hover states change the icon color along with the text. */
.arrow-icon{display:inline-block;width:12px;height:12px;flex:0 0 auto;background-color:currentColor;-webkit-mask:url(../img/ic_arrow_inactive.svg) no-repeat center;-webkit-mask-size:contain;mask:url(../img/ic_arrow_inactive.svg) no-repeat center;mask-size:contain;transition:background-color .2s ease}
.arrow-icon.arrow-right{transform:rotate(180deg)}

.article{background:#f8f9fc;padding:60px 0 40px}
.article .back-link{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;font-weight:600;color:#0a63db;text-decoration:none}
.article .back-link:hover{color:#084a9e}
.article .article-meta{font-size:14px;color:#79798a;margin-bottom:10px}
.article h1{font-family:"Proxima Nova BOLD",sans-serif;font-weight:700;font-size:38px;line-height:46px;color:#201f35;margin:0 0 20px}
.article .article-cta{margin:40px 0}
.article .terms-text{background:none}

/* Homepage "latest from the blog" teaser — mirrors .blog-card above */
.main-page section.blog-teaser{padding:100px 0}
.main-page section.blog-teaser .section-title{font-family:"Proxima Nova BOLD",sans-serif;text-align:center;margin-bottom:50px}
.main-page section.blog-teaser .blog-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:30px;max-width:1000px;margin:0 auto 40px}
.main-page section.blog-teaser .blog-card{width:auto}
.main-page section.blog-teaser .see-all{text-align:center}
.main-page section.blog-teaser .see-all a{display:inline-block;padding:14px 36px;border:2px solid #0a63db;border-radius:100px;color:#0a63db;font-weight:600;text-decoration:none}

@media only screen and (max-width: 767px){
    .blog-hero h1{font-size:28px;line-height:36px}
    .blog-card{width:100%}
    .blog-list .blog-grid{grid-template-columns:1fr}
    .blog-featured .blog-card{padding:24px}
    .blog-featured h2{font-size:22px;line-height:28px}
    .main-page section.blog-teaser .blog-grid{grid-template-columns:1fr}
    .article h1{font-size:28px;line-height:36px}
}