/* Blog / article layout — loads after styles.css and reuses its tokens, topbar, buttons, footer. */
body.blog{background:radial-gradient(ellipse at 50% 0%,#160c2a 0%,#05060d 55%,#02020a 100%) fixed}
.post{max-width:720px;margin:0 auto;padding:48px var(--gutter) 24px}
.crumbs{font-size:13px;color:var(--mute);margin-bottom:28px}
.crumbs a{color:var(--ink-soft)}
.crumbs a:hover{color:#fff}
.post__head h1{font-size:clamp(34px,5vw,54px);font-weight:800;letter-spacing:-.02em;line-height:1.08;color:#e9e9f1}
.post__meta{color:var(--mute);font-size:14px;margin-top:16px}
.post__body{margin-top:40px;font-size:18px;line-height:1.7;color:var(--ink-soft)}
.post__body h2{font-size:clamp(24px,3vw,30px);font-weight:700;letter-spacing:-.01em;color:#e9e9f1;margin:48px 0 14px;line-height:1.2}
.post__body h3{font-size:20px;font-weight:600;color:#e9e9f1;margin:32px 0 10px}
.post__body p{margin:0 0 20px}
.post__body ul,.post__body ol{margin:0 0 20px 22px}
.post__body li{margin-bottom:8px}
.post__body strong{color:#fff;font-weight:600}
.post__body a{color:var(--violet-2);text-decoration:underline;text-underline-offset:3px}
.post__body blockquote{border-left:3px solid var(--violet);padding:4px 0 4px 18px;margin:0 0 20px;color:#d6d6e6}
.post__body table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:16px}
.post__body th,.post__body td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.post__body th{color:#fff;font-weight:600}
.post__body hr{border:0;border-top:1px solid var(--line);margin:36px 0}
.post__body .note{font-size:15px;color:var(--mute);border:1px solid var(--line);border-radius:14px;padding:14px 16px}

.cta-box{margin:40px 0;padding:28px;border-radius:24px;background:linear-gradient(180deg,#11112a,#0d0d1a);border:1px solid var(--line-2);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.cta-box__kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-2);margin:0 0 8px}
.cta-box__title{font-size:22px;font-weight:700;color:#fff;line-height:1.25;margin:0 0 10px}
.cta-box p{font-size:16px;color:var(--ink-soft);margin:0 0 18px}

.post-faq{margin-top:48px}
.post-faq h2{font-size:26px;font-weight:700;color:#e9e9f1;margin-bottom:16px}
.post-faq details{border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:10px;background:rgba(255,255,255,.02)}
.post-faq summary{cursor:pointer;font-weight:600;color:#fff;display:flex;justify-content:space-between;align-items:center;list-style:none}
.post-faq summary::-webkit-details-marker{display:none}
.post-faq summary i{font-style:normal;color:var(--mute)}
.post-faq details[open] summary i{transform:rotate(45deg)}
.post-faq p{margin:12px 0 4px;color:var(--ink-soft);line-height:1.6}

.related{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}
.related__card{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.02);transition:border-color .15s,transform .15s}
.related__card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.related__kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.related__title{font-weight:600;color:#fff;line-height:1.3}

.cards{display:grid;gap:16px;margin-top:40px}
.card{display:block;padding:26px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.02);transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card h2{font-size:22px;font-weight:700;color:#fff;line-height:1.25;margin-bottom:8px}
.card p{color:var(--ink-soft);font-size:15px;line-height:1.55;margin-bottom:12px}
.card__meta{font-size:13px;color:var(--mute)}

.endcta{max-width:1100px;margin:48px auto 0;padding:clamp(48px,7vw,80px) var(--gutter);text-align:center;background:linear-gradient(180deg,#0e0e1c,#0a0a16);border:1px solid var(--line);border-radius:32px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.endcta h2{font-size:clamp(36px,5vw,64px);font-weight:800;letter-spacing:-.02em;line-height:1;color:#cfcfe6;text-shadow:0 0 80px rgba(124,92,255,.35)}
.endcta p{color:var(--mute);margin:20px auto 30px;max-width:520px;font-size:16px;line-height:1.55}
body.blog .footer{margin-top:24px}

@media (max-width:640px){
  .related{grid-template-columns:1fr}
  .post__body{font-size:17px}
  .endcta{margin-left:var(--gutter);margin-right:var(--gutter);border-radius:24px}
}