/* v18.9 — homepage rhythm and blog reading UX */

/* Homepage: the hero already routes by task/project/existing site, so the duplicate
   decision cards below it are intentionally removed. */
.home-services-section{padding-top:54px}
.home-price-explainer{display:grid;grid-template-columns:1fr 1fr auto;gap:1px;margin-top:16px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--border)}
.home-price-explainer>div{display:grid;gap:3px;padding:14px 15px;background:#fff}
.home-price-explainer span{color:var(--text-light);font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.home-price-explainer strong{font-size:.82rem;line-height:1.4}
.home-price-explainer p{margin:0;color:var(--text-light);font-size:.72rem;line-height:1.45}
.home-price-explainer__actions{min-width:220px;align-content:center!important;gap:8px!important}
.home-price-explainer__actions .text-link{font-size:.72rem}

/* Blog index */
.blog-index-hero{padding-top:44px;padding-bottom:34px;background:linear-gradient(135deg,#f8fafc,#fff)}
.blog-index-hero__container{max-width:1030px!important}
.blog-index-hero h1{max-width:850px;margin:5px 0 10px;font-size:clamp(38px,4.2vw,54px);line-height:1.05;letter-spacing:-.028em}
.blog-index-hero>div>p{max-width:780px;margin:0;color:#647083;font-size:16px;line-height:1.62}
.blog-index-search{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:6px;align-items:center;max-width:720px;margin-top:20px;padding:5px;border:1px solid #dfe5eb;border-radius:11px;background:#fff;box-shadow:0 8px 24px rgba(45,55,72,.035)}
.blog-index-search>i{display:grid;place-items:center;color:#98a2b3}
.blog-index-search input{min-width:0;height:40px;border:0;outline:0;background:transparent;font:inherit;font-size:.82rem}
.blog-index-search button{height:38px;padding:0 16px;border:0;border-radius:8px;background:var(--primary);color:#fff;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}

.blog-index-section{padding-top:42px}
.blog-index-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:22px;align-items:start}
.blog-index-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.blog-index-card{overflow:hidden;border:1px solid var(--border);border-radius:12px;background:#fff}
.blog-index-card__image{display:block;aspect-ratio:16/8.7;overflow:hidden;background:#eef2f6}
.blog-index-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.blog-index-card:hover .blog-index-card__image img{transform:scale(1.025)}
.blog-index-card__image--placeholder{display:grid;place-items:center;color:#a8b1bd;font-size:26px;background:linear-gradient(135deg,#f2f5f8,#e8edf2)}
.blog-index-card__body{padding:14px}
.blog-index-card__meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:6px;color:#8b95a3;font-size:.66rem}
.blog-index-card__meta>a{color:var(--primary-dark);font-weight:800;text-decoration:none}
.blog-index-card__meta>*+*:before{content:"·";margin-right:7px;color:#bbc2ca}
.blog-index-card h2{margin:0 0 6px;font-size:18px;line-height:1.3}
.blog-index-card h2 a{color:var(--text);text-decoration:none}
.blog-index-card p{margin:0 0 11px;color:var(--text-light);font-size:.76rem;line-height:1.55}
.blog-index-card__link{display:inline-flex;align-items:center;gap:5px;color:#536071;font-size:.72rem;font-weight:800;text-decoration:none}
.blog-index-card__link:hover{color:var(--primary-dark)}
.blog-index-sidebar{position:sticky;top:84px;display:grid;gap:10px}
.blog-filter-card,.blog-index-help{padding:14px;border:1px solid var(--border);border-radius:11px;background:#fff}
.blog-filter-card>span,.blog-index-help>span{display:block;margin-bottom:9px;color:var(--text-light);font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.blog-filter-list{display:grid}
.blog-filter-list>a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid #edf0f3;color:#536071;text-decoration:none}
.blog-filter-list>a:first-child{border-top:0}.blog-filter-list strong{font-size:.75rem}.blog-filter-list small{min-width:25px;padding:2px 6px;border-radius:7px;background:#f2f4f7;color:#7b8696;text-align:center;font-size:.65rem}
.blog-index-tags{display:flex;flex-wrap:wrap;gap:5px}.blog-index-tags>a{padding:5px 7px;border:1px solid var(--border);border-radius:7px;color:#596473;font-size:.68rem;text-decoration:none;background:#fafbfc}
.blog-index-help{border-color:#efc8b8;background:linear-gradient(180deg,#fffaf7,#fff)}
.blog-index-help strong{display:block;margin-bottom:5px;font-size:.85rem;line-height:1.4}.blog-index-help p{margin:0 0 10px;color:var(--text-light);font-size:.72rem;line-height:1.48}.blog-index-help .btn+.btn{margin-top:6px}
.blog-index-pagination{margin-top:20px}
.blog-index-empty{padding:44px 20px;border:1px dashed #ced6df;border-radius:12px;text-align:center;background:#fafbfc}.blog-index-empty i{font-size:24px;color:#a1abb7}.blog-index-empty h2{margin:10px 0 4px;font-size:18px}.blog-index-empty p{margin:0;color:var(--text-light)}

/* Article */
.blog-article-hero{padding-top:44px;padding-bottom:30px;background:linear-gradient(135deg,#f8fafc,#fff)}
.blog-article-hero__container{max-width:960px!important}
.blog-article-hero__category{display:inline-flex;margin:8px 0;color:var(--primary-dark);font-size:.7rem;font-weight:800;text-decoration:none;text-transform:uppercase;letter-spacing:.05em}
.blog-article-hero h1{max-width:900px;margin:0 0 12px;font-size:clamp(36px,4vw,52px);line-height:1.08;letter-spacing:-.026em}
.blog-article-hero__meta{display:flex;gap:14px;color:#7f8997;font-size:.72rem}.blog-article-hero__meta span{display:flex;align-items:center;gap:5px}
.blog-article-section{padding-top:34px}
.blog-article-layout{display:grid;grid-template-columns:minmax(0,740px) 250px;gap:28px;justify-content:center;align-items:start}
.blog-article-image{overflow:hidden;margin-bottom:22px;border-radius:12px;background:#eef2f6}.blog-article-image img{display:block;width:100%;height:auto}
.blog-article-content{font-size:16px;line-height:1.75;color:#3f4b5a}
.blog-article-content h2{margin:34px 0 12px;font-size:26px;line-height:1.25;color:var(--text)}.blog-article-content h3{margin:26px 0 10px;font-size:20px;color:var(--text)}
.blog-article-content p{margin:0 0 16px}.blog-article-content ul,.blog-article-content ol{margin:0 0 18px;padding-left:22px}.blog-article-content li{margin:5px 0}
.blog-article-content blockquote{margin:22px 0;padding:14px 16px;border-left:3px solid var(--primary);background:#f8fafc;color:#596473}
.blog-article-content img{max-width:100%;height:auto;border-radius:9px}
.blog-article-sidebar{position:sticky;top:84px;display:grid;gap:9px}
.blog-article-help{padding:15px;border:1px solid #efc8b8;border-radius:11px;background:linear-gradient(180deg,#fffaf7,#fff)}
.blog-article-help>span{display:block;margin-bottom:5px;color:var(--primary-dark);font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.blog-article-help>strong{display:block;margin-bottom:5px;font-size:.84rem;line-height:1.4}.blog-article-help p{margin:0 0 10px;color:var(--text-light);font-size:.7rem;line-height:1.48}.blog-article-help .btn+.btn{margin-top:6px}
.blog-article-side-links{display:grid;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--border);gap:1px}.blog-article-side-links>a{display:grid;grid-template-columns:27px minmax(0,1fr) 12px;gap:7px;align-items:center;padding:9px;background:#fff;color:var(--text);text-decoration:none}.blog-article-side-links>a>i:first-child{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:#f2f4f7;color:#667085;font-size:8px}.blog-article-side-links span{display:grid;gap:1px}.blog-article-side-links strong{font-size:.72rem}.blog-article-side-links small{color:var(--text-light);font-size:.63rem}.blog-article-side-links>a>i:last-child{color:#a2aab5;font-size:.6rem}
.blog-article-tags{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;margin-top:26px;padding-top:17px;border-top:1px solid var(--border)}.blog-article-tags>span{color:var(--text-light);font-size:.68rem;font-weight:800;text-transform:uppercase}.blog-article-tags>div{display:flex;flex-wrap:wrap;gap:5px}.blog-article-tags a{padding:4px 7px;border:1px solid var(--border);border-radius:6px;color:#596473;font-size:.67rem;text-decoration:none}
.blog-article-share{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;padding:11px 0;border-top:1px solid var(--border);color:var(--text-light);font-size:.7rem}.blog-article-share>div{display:flex;gap:5px}.blog-article-share a{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--border);border-radius:8px;color:#667085;text-decoration:none;background:#fff}
.blog-related-section{padding-top:40px}.blog-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.blog-related-card{overflow:hidden;border:1px solid var(--border);border-radius:10px;background:#fff}.blog-related-card>a{display:block;aspect-ratio:16/8.5;overflow:hidden}.blog-related-card img{width:100%;height:100%;object-fit:cover}.blog-related-card>div{padding:11px}.blog-related-card small{color:var(--text-light);font-size:.64rem}.blog-related-card h3{margin:4px 0 8px;font-size:.82rem;line-height:1.4}.blog-related-card h3 a{color:var(--text);text-decoration:none}.blog-related-card__link{font-size:.68rem;font-weight:800;text-decoration:none}

@media(max-width:950px){
    .home-price-explainer{grid-template-columns:1fr 1fr}.home-price-explainer__actions{grid-column:1/-1;display:flex!important;align-items:center!important}
    .blog-index-layout,.blog-article-layout{grid-template-columns:1fr}.blog-index-sidebar,.blog-article-sidebar{position:static}
    .blog-index-sidebar{grid-template-columns:1fr 1fr}.blog-index-help{grid-column:1/-1}
}
@media(max-width:680px){
    .home-services-section{padding-top:40px}.home-price-explainer{grid-template-columns:1fr}.home-price-explainer__actions{grid-column:auto;display:grid!important}
    .blog-index-hero h1,.blog-article-hero h1{font-size:34px}
    .blog-index-search{grid-template-columns:30px minmax(0,1fr)}.blog-index-search button{grid-column:1/-1;width:100%}
    .blog-index-grid,.blog-index-sidebar,.blog-related-grid{grid-template-columns:1fr}
    .blog-index-help{grid-column:auto}
    .blog-article-content{font-size:15px}.blog-article-content h2{font-size:23px}
}
@media(prefers-reduced-motion:reduce){
    .blog-index-card__image img{transition:none}
}
