/* blog.css — BLOG-POST template (prose layout) on top of home.css.
   For article/editorial pages. Pair with home.css (nav/footer/fonts/buttons). */

.bwrap{max-width:760px;margin:0 auto;padding:0 24px}

/* blog hero */
.bhero{position:relative;text-align:center;padding:54px 24px 0;overflow:hidden;border-bottom:1px solid var(--line,rgba(120,180,240,.14))}
.bhero::before{content:'';position:absolute;top:-140px;left:50%;transform:translateX(-50%);width:880px;max-width:130%;height:520px;background:radial-gradient(closest-side,rgba(88,202,254,.18),transparent 72%);z-index:0;pointer-events:none}
.bhero .crumb{position:relative;z-index:2;font-size:13px;color:#7f9bb8;margin-bottom:18px}
.bhero .crumb a{color:#a7c4e0}
.bhero .kicker{position:relative;z-index:2;display:inline-block;margin-bottom:16px}
.bhero h1{position:relative;z-index:2;font-family:'Clash Display',sans-serif;font-weight:700;font-size:clamp(30px,4.6vw,50px);line-height:1.08;color:#fff;max-width:840px;margin:0 auto}
.bhero .dek{position:relative;z-index:2;font-size:clamp(16px,2vw,20px);color:#bcd7ef;max-width:660px;margin:20px auto 0;line-height:1.6}
.bhero .byline{position:relative;z-index:2;display:flex;gap:8px 20px;justify-content:center;flex-wrap:wrap;margin:26px 0 0;font-size:13.5px;color:#7f9bb8}
.bhero .byline b{color:#a7c4e0}
.bhero .bfig{position:relative;z-index:2;max-width:900px;margin:40px auto 0}
.bhero .bfig img{width:100%;display:block;border-radius:22px 22px 0 0;border:1px solid rgba(120,180,240,.2);border-bottom:0;box-shadow:0 30px 80px rgba(4,12,24,.55)}

/* prose body */
.prose{padding:46px 0 10px}
.prose p,.prose ul,.prose ol{color:#bcd7ef;font-size:17.5px;line-height:1.78;margin:20px 0}
.prose h2{font-family:'Clash Display',sans-serif;color:#fff;font-size:clamp(24px,3.2vw,32px);margin:46px 0 6px;line-height:1.18}
.prose h2::before{content:'';display:block;width:34px;height:3px;background:linear-gradient(90deg,#58cafe,#3ee0b0);border-radius:3px;margin-bottom:16px}
.prose h3{font-family:'Clash Display',sans-serif;color:#eaf3ff;font-size:21px;margin:30px 0 4px}
.prose a{color:#58cafe;text-decoration:underline;text-underline-offset:2px}
/* buttons inside prose must keep the homepage button styling, not the link style */
.prose a.btn{text-decoration:none}
.prose a.btn-primary{color:#10233B}
.prose a.btn-ghost{color:var(--ice)}
.prose strong{color:#fff;font-weight:600}
.prose ul,.prose ol{padding-left:4px;list-style:none}
.prose ul li,.prose ol li{position:relative;padding-left:26px;margin:10px 0}
.prose ul li::before{content:'';position:absolute;left:4px;top:12px;width:8px;height:8px;background:#58cafe;transform:rotate(45deg);border-radius:2px}
.prose ol{counter-reset:n}
.prose ol li::before{counter-increment:n;content:counter(n);position:absolute;left:0;top:1px;width:20px;height:20px;background:rgba(88,202,254,.14);color:#58cafe;border-radius:6px;font-size:12px;font-weight:700;display:grid;place-items:center;font-family:'Clash Display',sans-serif}
.prose img{width:100%;border-radius:18px;border:1px solid rgba(120,180,240,.18);margin:28px 0;box-shadow:0 20px 50px rgba(4,12,24,.45)}
.prose figure{margin:28px 0}
.prose figure img{margin:0}
.prose figcaption{text-align:center;font-size:13px;color:#7f9bb8;margin-top:10px}
.prose blockquote{border-left:3px solid #58cafe;background:rgba(88,202,254,.06);margin:26px 0;padding:14px 22px;border-radius:0 12px 12px 0;color:#cfe4f7;font-size:17px}

/* key-takeaways / callout box */
.kbox{background:linear-gradient(180deg,#0c2440,#081a30);border:1px solid rgba(120,180,240,.18);border-radius:18px;padding:24px 26px;margin:30px 0}
.kbox h3{font-family:'Clash Display',sans-serif;color:#fff;font-size:18px;margin:0 0 10px;display:flex;align-items:center;gap:10px}
.kbox h3::before{content:'';width:18px;height:3px;border-radius:3px;background:linear-gradient(90deg,#58cafe,#3ee0b0)}
.kbox ul{margin:0;list-style:none}
.kbox li{position:relative;padding-left:26px;margin:8px 0;color:#bcd7ef;font-size:15.5px}
.kbox li::before{content:'';position:absolute;left:2px;top:3px;width:15px;height:15px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ee0b0' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}

/* inline CTA inside prose */
.prose .inline-cta{background:linear-gradient(120deg,#0e2745,#0c2c50);border:1px solid rgba(88,202,254,.26);border-radius:18px;padding:28px 26px;text-align:center;margin:36px 0}
.prose .inline-cta h3{margin:0 0 6px;font-size:21px;color:#fff}
.prose .inline-cta p{margin:0 auto 18px;max-width:520px;color:#bcd7ef;font-size:15.5px}

@media(max-width:620px){.prose p,.prose ul,.prose ol{font-size:16.5px}}

/* ===== comparison / spec table (shared component, locked tokens) ===== */
.prose .cmp-wrap,.cmp-wrap{margin:30px auto;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.cmp{width:100%;border-collapse:collapse;background:linear-gradient(180deg,#0c2440,#081a30);border:1px solid rgba(120,180,240,.18);border-radius:18px;overflow:hidden;font-size:15px}
.cmp caption{caption-side:top;text-align:left;color:#9fc4e8;font-size:13px;padding:0 0 10px}
.cmp th,.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line,rgba(129,183,240,.16));color:#cfe3f7;vertical-align:top}
.prose .cmp th,.prose .cmp td{margin:0}
.cmp thead th{background:rgba(88,202,254,.09);color:#eaf3ff;font-family:'Clash Display',sans-serif;font-weight:600;font-size:13.5px;letter-spacing:.3px;text-transform:uppercase}
.cmp tbody th{color:#9fc4e8;font-weight:600;white-space:nowrap}
.cmp tbody tr:last-child td,.cmp tbody tr:last-child th{border-bottom:0}
.cmp tbody tr:hover{background:rgba(88,202,254,.04)}
.cmp .yes{color:#39E58C;font-weight:600}
.cmp .no{color:#7f9bb8}
.cmp .gh{background:rgba(57,229,140,.06)}
.cmp thead th.gh{background:rgba(57,229,140,.14);color:#d6ffe9}