/* Shared styles for the guide articles (seo-article-template.php) and the
   data-driven service pages (seo-page-template.php). Previously each page
   carried its own inline copy, and the copies had already drifted. */

.seo-article-page{background:#fff;color:#334;font-family:"IBM Plex Sans",Arial,sans-serif}
.seo-article-hero{background:linear-gradient(135deg,var(--blue-dark,#022b3a),var(--blue-mid,#1f7a8c));color:#fff;padding:82px 0 58px}
.seo-article-crumbs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0;font-size:14px}
.seo-article-crumbs a{color:#fff;text-decoration:underline;text-underline-offset:4px}
.seo-article-hero h1{color:#fff;font-size:clamp(34px,5vw,58px);font-weight:800;line-height:1.06;margin:0 0 18px;max-width:930px}
.seo-article-hero p{color:rgba(255,255,255,.9);font-size:18px;line-height:1.65;margin:0;max-width:840px}
.seo-article-byline{color:rgba(255,255,255,.94);font-size:15.5px;font-weight:600;margin:20px 0 2px}
.seo-article-byline a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.seo-article-meta{font-size:14px;color:rgba(255,255,255,.78);margin-top:4px}

.seo-article-body{padding:58px 0}
.seo-article-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:34px;align-items:start}
.seo-article-content{background:#fff;min-width:0}
.seo-article-note,.seo-article-card{border:1px solid var(--border,#d8e4ec);border-radius:8px;padding:22px}
.seo-article-note{background:var(--surface,#f7fbfd);border-left:5px solid var(--blue-mid,#1f7a8c);margin-bottom:28px}
.seo-article-content h2{color:var(--blue-dark,#022b3a);font-size:28px;font-weight:800;line-height:1.2;margin:34px 0 12px}
.seo-article-content h3{color:var(--blue-dark,#022b3a);font-size:20px;font-weight:800;margin:24px 0 8px}
.seo-article-content p,.seo-article-content li{color:var(--text-body,#34485c);font-size:17px;line-height:1.75}
.seo-article-content ul{padding-left:22px}
.seo-article-content a{color:var(--blue-mid,#1f7a8c);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.seo-section-links{list-style:none;margin:6px 0 0;padding:0 0 0 14px;border-left:3px solid var(--border,#d8e4ec)}
.seo-section-links li{font-size:16px;margin:4px 0}

.seo-article-aside{position:sticky;top:96px;background:#fff}
.seo-article-aside h2{color:var(--blue-dark,#022b3a);font-size:20px;font-weight:800;margin:0 0 14px}
.seo-article-aside a{border-bottom:1px solid var(--border,#d8e4ec);color:var(--blue-mid,#1f7a8c);display:block;font-weight:800;padding:12px 0;text-decoration:none}
.seo-article-aside a:hover{text-decoration:underline;text-underline-offset:3px}

.seo-article-cta{background:var(--blue-dark,#022b3a);color:#fff;margin-top:34px}
.seo-article-cta h2,.seo-article-cta p{color:#fff}
.seo-article-content .seo-article-cta a.theme-btn{background:var(--blue-mid,#1f7a8c);color:#fff;display:inline-block;margin-top:8px;text-decoration:none}

.seo-sources{margin-top:34px;padding-top:18px;border-top:1px solid var(--border,#d8e4ec)}
.seo-sources h2{font-size:18px;margin:0 0 8px}
.seo-sources p,.seo-sources li{font-size:15px}

.seo-video-card{background:#061f35;border:0;margin:0 0 30px;padding:18px}
.seo-video-card h2{color:#fff;font-size:22px;margin:0 0 14px}
/* style.css gives .video-wrapper a fixed height (550px, 250px on mobile) for
   the theme's hero video. With aspect-ratio that fixed height forced the
   width past the column on phones, so reset it inside article video cards. */
.seo-video-card .video-wrapper{aspect-ratio:16/9;background:#000;border-radius:8px;display:block;height:auto;overflow:hidden;width:100%;z-index:auto}
.video-wrapper iframe{border:0;height:100%;width:100%}
.seo-video-card p{color:rgba(255,255,255,.88);font-size:15px;margin:12px 0 0}

/* Service pages */
.seo-offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin:18px 0 8px}
.seo-offer{border:1px solid var(--border,#d8e4ec);border-radius:8px;padding:22px;background:var(--surface,#f7fbfd)}
.seo-offer h3{margin-top:0}
.seo-offer .seo-offer-price{color:var(--blue-dark,#022b3a);font-size:34px;font-weight:800;line-height:1;margin:8px 0 4px}
.seo-offer .seo-offer-note{font-size:14px;margin:0 0 10px}
.seo-offer ul{margin:10px 0 14px}
.seo-offer li{font-size:15.5px}
.seo-article-content .seo-offer a.theme-btn{background:var(--blue-mid,#1f7a8c);color:#fff;display:inline-block;text-decoration:none}

.seo-faq-list{margin-top:10px}
.seo-faq-list details{border:1px solid var(--border,#d8e4ec);border-radius:8px;margin:0 0 12px;padding:0 18px;background:#fff}
.seo-faq-list summary{cursor:pointer;color:var(--blue-dark,#022b3a);font-size:18px;font-weight:800;padding:16px 0;list-style-position:outside}
.seo-faq-list details[open] summary{border-bottom:1px solid var(--border,#d8e4ec);margin-bottom:10px}
.seo-faq-list details p{margin:0 0 14px}

.seo-profile{display:grid;grid-template-columns:200px minmax(0,1fr);gap:26px;align-items:start;margin-bottom:10px}
.seo-profile img{border-radius:8px;height:auto;width:100%}
@media(max-width:900px){
    .seo-article-grid{grid-template-columns:1fr}
    .seo-article-aside{position:static}
    .seo-article-hero{padding:60px 0 44px}
}
@media(max-width:600px){
    .seo-profile{grid-template-columns:1fr}
    .seo-profile img{max-width:220px}
}