.wrap-narrow{max-width:760px;margin:0 auto;padding:0 24px}
.post-hero{padding:46px 0 38px;color:#fff}
.post-hero .post-cat{display:inline-block;background:rgba(255,255,255,.2);color:#fff;font-weight:700;font-size:13px;padding:5px 12px;border-radius:999px;margin:10px 0}
.post-hero h1{font-size:clamp(29px,4.4vw,44px);color:#fff;margin:6px 0 0;line-height:1.12;max-width:780px}
.post-meta{color:rgba(255,255,255,.92);font-size:15px;margin-top:14px}
.post{padding:36px 0 20px}
.tldr{background:linear-gradient(150deg,#f3f0ff,#fff);border:1px solid var(--line);border-radius:16px;padding:20px 24px;margin:6px 0 22px}
.tldr strong{display:block;margin-bottom:8px;color:var(--violet);text-transform:uppercase;font-size:13px;letter-spacing:.06em}
.tldr ul{margin:0 0 0 20px}.tldr li{margin-bottom:7px;color:var(--ink-2)}
.toc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 22px;margin:0 0 26px}
.toc strong{display:block;margin-bottom:8px;font-size:14px}
.toc ol{margin:0 0 0 20px}.toc li{margin-bottom:5px}.toc a{color:var(--violet)}
.post-body{font-size:17px;line-height:1.75;color:var(--ink-2)}
.post-body h2{font-size:27px;color:var(--ink);margin:36px 0 12px;letter-spacing:-.01em}
.post-body h3{font-size:20px;color:var(--ink);margin:26px 0 8px}
.post-body h4{font-size:16px;color:var(--ink);margin:14px 0 6px}
.post-body p{margin-bottom:16px}
.post-body ul,.post-body ol{margin:0 0 18px 24px}
.post-body li{margin-bottom:8px}
.post-body strong{color:var(--ink)}
.post-body a{color:var(--violet);font-weight:600}
.post-body .callout{background:var(--bg-soft);border:1px solid var(--line);border-left:4px solid var(--violet);border-radius:12px;padding:16px 18px;margin:22px 0;font-size:15.5px;color:var(--ink-2)}
.post-body .callout-warn{border-left-color:#f59e0b}
.post-body .template{background:#fdfcff;border:1px dashed #c9bdf5;border-radius:14px;padding:22px 24px;margin:24px 0}
.post-faq{margin-top:42px;border-top:1px solid var(--line);padding-top:28px}
.post-faq h2{font-size:24px;margin-bottom:14px}
.post-faq details{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:#fff}
.post-faq summary{padding:15px 18px;font-weight:700;cursor:pointer;list-style:none}
.post-faq summary::-webkit-details-marker{display:none}
.post-faq .a{padding:0 18px 16px;color:var(--ink-2)}
.author-bio{display:flex;gap:14px;align-items:center;background:var(--bg-soft);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin:30px 0}
.author-bio .av{width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.post .cta{margin:34px 0}
.related{margin:30px 0 10px}
.related h3{font-size:18px;margin-bottom:8px}
.related a{display:block;padding:13px 0;border-bottom:1px solid var(--line);color:var(--ink);font-weight:600}
.related a:hover{color:var(--violet)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px}
.blog-card{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 12px 40px -20px rgba(15,16,33,.12);transition:transform .25s}
.blog-card:hover{transform:translateY(-5px)}
.blog-card .bc-top{height:8px}
.blog-card .bc-body{padding:22px}
.blog-card .bc-cat{font-size:12px;font-weight:700;color:var(--violet);text-transform:uppercase;letter-spacing:.05em}
.blog-card h3{font-size:19px;margin:8px 0;color:var(--ink);line-height:1.2}
.blog-card p{font-size:14.5px;color:var(--muted);margin-bottom:12px}
.blog-card .bc-meta{font-size:13px;color:var(--muted)}
.post-resources{margin:30px 0;padding:18px 20px;background:var(--bg-soft);border:1px solid var(--line);border-radius:14px}
.post-resources strong{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:8px}
.post-resources a{display:inline-block;margin-right:16px;color:var(--violet);font-weight:600}