/* ── Blog Post — Shared Styles ────────────────────────────────────────────────
   Shared across all blog post pages. Link this instead of writing inline CSS.
   Post-specific components (.tier-block, .check-item, etc.) stay inline.
   ──────────────────────────────────────────────────────────────────────────── */

/* Layout */
.post-outer{padding-top:80px}
.post-wrap{max-width:760px;margin:0 auto;padding:2.5rem 2.5rem 5rem}

/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:.4rem;font-family:var(--fm);font-size:.65rem;color:var(--t3);letter-spacing:.03em;margin-bottom:2.5rem;flex-wrap:wrap}
.breadcrumb a{color:var(--t3);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb-sep{opacity:.4}

/* Post header */
.post-header{margin-bottom:2.5rem}
.post-cat{font-family:var(--fm);font-size:.62rem;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:.85rem}
.post-title{font-family:var(--fd);font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;line-height:1.15;color:var(--t1);margin-bottom:1rem}
.post-meta{font-family:var(--fm);font-size:.68rem;color:var(--t3);letter-spacing:.02em;margin-bottom:1rem}
.post-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem}
.post-tag{font-family:var(--fm);font-size:.62rem;color:var(--t3);background:var(--bg3);border:1px solid var(--border);border-radius:3px;padding:.2rem .6rem;letter-spacing:.02em}

/* Short answer block */
.short-answer{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;padding:1.5rem 1.75rem;margin-bottom:2.5rem}
.short-answer-label{font-family:var(--fm);font-size:.62rem;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.75rem}
.short-answer p{color:var(--t1);font-size:1rem;line-height:1.75;margin-bottom:.75rem}
.short-answer p:last-child{margin-bottom:0}

/* Post body */
.post-body h2{font-family:var(--fd);font-size:1.6rem;font-weight:700;color:var(--t1);margin:2.5rem 0 1rem;line-height:1.25}
.post-body h3{font-family:var(--fb);font-size:1rem;font-weight:600;color:var(--t1);margin:1.75rem 0 .75rem}
.post-body p{color:var(--t2);font-size:1rem;line-height:1.8;margin-bottom:1.25rem}
.post-body p strong{color:var(--t1)}
.post-body a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(62,234,172,.3)}
.post-body a:hover{border-bottom-color:var(--accent)}
.post-body ul,.post-body ol{color:var(--t2);font-size:1rem;line-height:1.8;margin:0 0 1.25rem 1.5rem}
.post-body li{margin-bottom:.4rem}

/* CTA block */
.post-cta{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:2rem 2.25rem;margin:3rem 0;text-align:center}
.post-cta h3{font-family:var(--fd);font-size:1.4rem;font-weight:400;color:var(--t1);margin-bottom:.75rem}
.post-cta p{color:var(--t2);font-size:.95rem;line-height:1.7;margin-bottom:1.5rem}
.btn-cta{display:inline-flex;align-items:center;gap:.4rem;background:var(--accent);color:#0b0b0e;font-family:var(--fm);font-size:.78rem;font-weight:500;padding:.75rem 1.75rem;border-radius:5px;text-decoration:none;transition:all .2s;letter-spacing:.02em}
.btn-cta:hover{background:#5bf0bc;transform:translateY(-1px)}

/* FAQ block */
.faq-block{margin-top:3rem;border-top:1px solid var(--border);padding-top:2rem}
.faq-block h2{font-family:var(--fd);font-size:1.4rem;font-weight:400;color:var(--t1);margin-bottom:1.5rem}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%;background:none;border:none;padding:1rem 0;text-align:left;font-family:var(--fb);font-size:.95rem;font-weight:500;color:var(--t1);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-icon{color:var(--accent);font-size:1.2rem;flex-shrink:0;transition:transform .2s}
.faq-q[aria-expanded="true"] .faq-icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-q[aria-expanded="true"] + .faq-a{max-height:500px}
.faq-a-inner{padding:.25rem 0 1.25rem;color:var(--t2);font-size:.95rem;line-height:1.75}
.faq-a-inner a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(62,234,172,.3)}
.faq-a-inner a:hover{border-bottom-color:var(--accent)}

/* Mobile */
@media(max-width:768px){
  .post-wrap{padding:1.5rem 1.25rem 3.5rem}
}