:root{ --ink:#0e1726; --ink2:#1d2735; --muted:#5b6b82; --line:#e7edf3; --bg:#fff; --mist:#f3f7fb; --blue:#3E9BF0; --blue-deep:#1f6fc4; --green:#22a866; }
*{ box-sizing:border-box; margin:0; padding:0 }
body{ font-family:'Manrope',system-ui,-apple-system,Segoe UI,sans-serif; color:var(--ink); background:var(--bg); line-height:1.7; -webkit-font-smoothing:antialiased }
a{ color:var(--blue-deep); text-decoration:none } a:hover{ text-decoration:underline }
.wrap{ max-width:720px; margin:0 auto; padding:0 22px }
/* nav */
.nav{ position:sticky; top:0; z-index:20; background:rgba(255,255,255,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line) }
.nav .wrap{ display:flex; align-items:center; gap:14px; height:56px }
.brand{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:17px; color:var(--ink) }
.brand .logo{ width:28px;height:28px;border-radius:8px;background:linear-gradient(145deg,#3E9BF0,#1f6fc4); display:grid;place-items:center }
.brand .logo svg{ width:17px;height:17px }
.nav .cta{ margin-left:auto; background:var(--ink); color:#fff; padding:8px 16px; border-radius:100px; font-size:13.5px; font-weight:700 } .nav .cta:hover{ background:var(--blue-deep); text-decoration:none }
/* article */
article{ padding:34px 0 20px }
.crumb{ font-size:13px; color:var(--muted); margin-bottom:14px } .crumb a{ color:var(--muted) }
h1{ font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:clamp(28px,5vw,40px); line-height:1.12; letter-spacing:-.01em }
.lede{ font-size:19px; color:var(--muted); margin:18px 0 8px; font-weight:500 }
.meta{ font-size:13px; color:var(--muted); margin:14px 0 24px; padding-bottom:20px; border-bottom:1px solid var(--line) }
article h2{ font-family:'Fraunces',serif; font-weight:600; font-size:26px; margin:36px 0 12px; line-height:1.15 }
article h3{ font-size:19px; margin:26px 0 8px; font-weight:800 }
article p{ margin:14px 0; font-size:17px; color:var(--ink2) }
article ul,article ol{ margin:14px 0 14px 22px } article li{ margin:8px 0; font-size:17px; color:var(--ink2) }
article b,article strong{ color:var(--ink) }
.callout{ background:var(--mist); border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:14px; padding:18px 20px; margin:24px 0; font-size:16px }
.callout b{ color:var(--blue-deep) }
.tldr{ background:#f1f9f4; border:1px solid #bce8cf; border-radius:16px; padding:18px 20px; margin:22px 0 }
.tldr b{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--green); margin-bottom:6px }
.faq{ margin-top:34px } .faq h2{ margin-bottom:6px }
.faq details{ border:1px solid var(--line); border-radius:14px; padding:2px 18px; margin-top:10px }
.faq summary{ list-style:none; cursor:pointer; padding:16px 0; font-weight:700; font-size:17px } .faq summary::-webkit-details-marker{ display:none }
.faq details[open] summary{ color:var(--blue-deep) } .faq .a{ padding:0 0 16px; color:var(--muted); font-size:16px }
/* CTA */
.cta-box{ background:linear-gradient(160deg,#0a1526,#13243f); color:#fff; border-radius:22px; padding:30px; text-align:center; margin:40px 0 10px }
.cta-box h3{ font-family:'Fraunces',serif; font-weight:600; font-size:24px; color:#fff; margin-bottom:8px }
.cta-box p{ color:#aac4e6; font-size:16px; margin-bottom:18px }
.cta-box a{ display:inline-block; background:#fff; color:var(--ink); padding:14px 28px; border-radius:100px; font-weight:800; font-size:16px } .cta-box a:hover{ background:var(--blue); color:#fff; text-decoration:none }
.related{ margin:40px 0; border-top:1px solid var(--line); padding-top:24px }
.related h2{ font-size:19px; font-family:'Manrope',sans-serif; font-weight:800; margin-bottom:12px }
.related a{ display:block; padding:12px 0; border-bottom:1px solid var(--line); font-weight:600; font-size:16px }
footer{ background:var(--mist); border-top:1px solid var(--line); padding:34px 0; margin-top:40px; text-align:center; color:var(--muted); font-size:13.5px }
.disc{ font-size:13px; color:var(--muted); font-style:italic; margin-top:26px; border-top:1px solid var(--line); padding-top:16px }
/* blog index */
.hero-b{ padding:40px 0 8px } .hero-b h1{ font-size:clamp(30px,6vw,44px) }
.posts{ display:grid; gap:16px; margin:30px 0 }
.post-card{ border:1px solid var(--line); border-radius:18px; padding:22px; transition:.2s; display:block; color:inherit }
.post-card:hover{ border-color:var(--blue); transform:translateY(-2px); box-shadow:0 20px 44px -34px #1b3a6644; text-decoration:none }
.post-card .tag{ font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-deep) }
.post-card h2{ font-family:'Fraunces',serif; font-weight:600; font-size:21px; margin:6px 0; color:var(--ink) }
.post-card p{ color:var(--muted); font-size:15px }