.costli-blog-section{padding:96px 32px 8px;color:#1c2340}
.costli-blog-section[hidden]{display:none}
.costli-blog-shell{max-width:1080px;margin:0 auto}
.costli-blog-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:36px}
.costli-blog-eyebrow{margin:0;font-size:12px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:#6d28d9}
.costli-blog-heading h2{margin:14px 0 12px;font-family:Archivo,sans-serif;font-weight:900;font-size:clamp(34px,4.4vw,52px);line-height:1.06;letter-spacing:-.035em}
.costli-blog-heading p{margin:0;max-width:560px;font-size:17px;line-height:1.6;color:#5b6484}
.costli-blog-all{flex:none;display:inline-flex;align-items:center;padding:12px 20px;border:1.5px solid rgba(28,35,64,.18);border-radius:999px;background:#fff;color:#1c2340;font-size:15px;font-weight:750}
.costli-blog-all:hover{border-color:#8b5cf6;color:#6d28d9}
.costli-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.costli-blog-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(28,35,64,.09);border-radius:22px;background:#fff;transition:transform .18s ease,box-shadow .18s ease}
.costli-blog-card:hover{transform:translateY(-3px);box-shadow:0 24px 48px -32px rgba(28,35,64,.38)}
.costli-blog-cover{aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,#ede4ff,#fbd5ea)}
.costli-blog-cover img{display:block;width:100%;height:100%;object-fit:cover}
.costli-blog-cover-art{position:relative;display:flex;align-items:flex-end;padding:22px}
.costli-blog-cover-art[data-tone="1"]{background:linear-gradient(135deg,#dcf6ef,#e7e2ff)}
.costli-blog-cover-art[data-tone="2"]{background:linear-gradient(135deg,#ffe6d5,#fbd7ea)}
.costli-blog-cover-art[data-tone="3"]{background:linear-gradient(135deg,#e3edff,#efe0ff)}
.costli-blog-cover-art::after{content:"";position:absolute;top:50%;right:-4%;width:52%;aspect-ratio:1;background:url("/images/branding/costli-mark.svg") center/contain no-repeat;opacity:.22;transform:translateY(-50%) rotate(-10deg)}
.costli-blog-cover-art span{position:relative;max-width:80%;font-family:Archivo,sans-serif;font-size:30px;font-weight:900;line-height:1;letter-spacing:-.03em;color:rgba(28,35,64,.8)}
.costli-blog-card-body{display:flex;flex:1;flex-direction:column;gap:10px;padding:22px 24px 24px}
.costli-blog-topic{margin:0;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#6d28d9}
.costli-blog-card h3{margin:0;font-family:Archivo,sans-serif;font-size:21px;font-weight:800;line-height:1.22;letter-spacing:-.02em}
.costli-blog-card h3 a{color:inherit}
.costli-blog-card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.costli-blog-card:hover h3 a{color:#6d28d9}
.costli-blog-card h3 a:focus-visible{outline:none}
.costli-blog-card h3 a:focus-visible::after{outline:3px solid #f59e0b;outline-offset:-3px}
.costli-blog-excerpt{display:-webkit-box;overflow:hidden;margin:0;font-size:15.5px;line-height:1.6;color:#5b6484;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.costli-blog-meta{margin:auto 0 0;padding-top:6px;font-size:13px;color:#5b6484}
@media (max-width:900px){.costli-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.costli-blog-section{padding:72px 16px 0}.costli-blog-heading{flex-direction:column;align-items:flex-start;margin-bottom:28px}.costli-blog-grid{grid-template-columns:1fr;gap:18px}}
@media (prefers-reduced-motion:reduce){.costli-blog-card{transition:none}.costli-blog-card:hover{transform:none}}