/* ============ KeyKiwi blog ============ */

.article { max-width: 800px; margin: 0 auto; padding: 2.2rem 1.2rem 4rem; }

.article__crumbs { font-size: .82rem; color: var(--muted); margin-bottom: 1.2rem; }
.article__crumbs a { color: var(--blue); }

.article h1 { font-size: 2.1rem; line-height: 1.2; letter-spacing: -.6px; margin-bottom: .7rem; }
.article__meta { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--muted); font-size: .84rem; margin-bottom: 1.4rem; }
.article__meta strong { color: var(--ink-soft); font-weight: 600; }

.article__hero { border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 1.8rem; width: 100%; height: auto; }

.article h2 { font-size: 1.45rem; letter-spacing: -.4px; margin: 2.4rem 0 .8rem; }
.article h3 { font-size: 1.12rem; margin: 1.8rem 0 .6rem; }
.article p, .article li { color: var(--ink-soft); line-height: 1.75; font-size: 1.02rem; }
.article p { margin-bottom: 1rem; }
.article ul, .article ol { margin: 0 0 1.2rem 1.4rem; }
.article li { margin-bottom: .45rem; }
.article a { color: var(--blue); }
.article a:hover { text-decoration: underline; }
.article figure { margin: 1.6rem 0; }
.article figure img { border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 auto; }
.article figcaption { text-align: center; color: var(--muted); font-size: .8rem; margin-top: .55rem; }

/* Table of contents */
.toc { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.4rem; margin: 0 0 2rem; }
.toc__title { font-weight: 700; font-size: .95rem; margin-bottom: .5rem; }
.toc ol { margin: 0 0 0 1.2rem; }
.toc li { margin-bottom: .25rem; font-size: .92rem; }

/* Comparison tables */
.article .table-scroll { overflow-x: auto; margin: 1.4rem 0; }
.article table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
.article th, .article td { border: 1px solid var(--line); padding: .65rem .8rem; text-align: left; vertical-align: top; color: var(--ink-soft); }
.article th { background: var(--navy); color: #fff; font-weight: 600; }
.article tr:nth-child(even) td { background: var(--bg-soft); }
.article td.yes { color: var(--green); font-weight: 700; }
.article td.no { color: #c23b3b; font-weight: 700; }

/* Callouts + product CTA */
.callout { border-left: 4px solid var(--blue); background: var(--bg-soft); border-radius: 0 var(--radius) var(--radius) 0; padding: .9rem 1.2rem; margin: 1.4rem 0; }
.callout--tip { border-color: var(--green); }
.callout--warn { border-color: var(--amber); }
.callout p:last-child { margin-bottom: 0; }

.cta-box { display: flex; gap: 1.2rem; align-items: center; background: var(--navy); color: #fff; border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 1.8rem 0; box-shadow: var(--shadow); }
.cta-box img { width: 84px; height: 84px; border-radius: 10px; background: #fff; padding: 6px; flex-shrink: 0; }
.cta-box__body { flex: 1; }
.cta-box__body strong { display: block; font-size: 1.02rem; margin-bottom: .2rem; }
.cta-box__body span { color: #c8d6e8; font-size: .86rem; }
.cta-box .btn { white-space: nowrap; }
.cta-box a.btn { color: #fff; }
@media (max-width: 560px) { .cta-box { flex-direction: column; text-align: center; } }

/* FAQ reuse */
.article .pdp__faq { border: 1px solid var(--line); border-radius: 10px; padding: .85rem 1.1rem; margin-bottom: .6rem; }
.article .pdp__faq summary { font-weight: 600; cursor: pointer; color: var(--ink); }
.article .pdp__faq p { margin: .6rem 0 0; }

/* Author / updated box */
.article__foot { border-top: 1px solid var(--line); margin-top: 2.5rem; padding-top: 1.2rem; color: var(--muted); font-size: .85rem; }

/* ---------- Blog index ---------- */
.blog-index { max-width: 1000px; margin: 0 auto; padding: 2.2rem 1.2rem 4rem; }
.blog-index h1 { font-size: 2rem; letter-spacing: -.5px; margin-bottom: .4rem; }
.blog-index__sub { color: var(--muted); margin-bottom: 2rem; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.4rem; }
.post-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .15s ease; background: #fff; }
.post-card:hover { transform: translateY(-3px); }
.post-card img { width: 100%; height: auto; aspect-ratio: 1200/630; object-fit: cover; }
.post-card__body { padding: 1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.post-card__title { font-weight: 700; font-size: 1.05rem; line-height: 1.35; margin-bottom: .5rem; color: var(--ink); }
.post-card__desc { color: var(--ink-soft); font-size: .88rem; line-height: 1.55; flex: 1; }
.post-card__meta { color: var(--muted); font-size: .78rem; margin-top: .8rem; }