:root {
  color-scheme: light;
  --bg:#ffffff; --bg-soft:#f8fafc; --border:#e5e7eb; --text:#0f172a;
  --text-soft:#475569; --accent:#2563eb; --good:#16a34a;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.7; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* Header */
header.site { border-bottom:1px solid var(--border); position:sticky; top:0; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(8px); z-index:20; }
header.site .wrap { max-width:960px; margin:0 auto; padding:0 20px; height:64px; display:flex; align-items:center; justify-content:space-between; }
.brand { font-weight:700; font-size:18px; color:var(--text); display:inline-flex; align-items:center; gap:8px; }
nav.nav { display:flex; gap:18px; align-items:center; }
nav.nav a { color:var(--text); font-weight:500; font-size:14px; }

/* Article */
.article { max-width:680px; margin:0 auto; padding:46px 20px 56px; }
.article .eyebrow { color:var(--accent); font-weight:700; font-size:13px; letter-spacing:.05em; text-transform:uppercase; }
.article h1 { font-size:36px; line-height:1.15; letter-spacing:-.02em; margin:10px 0 12px; }
.article .meta { color:var(--text-soft); font-size:14px; margin-bottom:26px; }
.article .lead { font-size:20px; color:var(--text-soft); margin:0 0 18px; }
.article h2 { font-size:24px; letter-spacing:-.01em; margin:40px 0 12px; }
.article h3 { font-size:18px; margin:28px 0 8px; }
.article p, .article li { font-size:17px; color:#1f2937; }
.article ul, .article ol { padding-left:22px; }
.article li { margin-bottom:9px; }
.article blockquote { margin:24px 0; padding:14px 18px; border-left:4px solid var(--accent); background:var(--bg-soft); border-radius:0 8px 8px 0; color:var(--text-soft); font-size:17px; }
.article strong { color:var(--text); }
.article hr { border:none; border-top:1px solid var(--border); margin:36px 0; }

/* CTA box inside articles */
.cta-box { margin:34px 0; padding:24px; border:1px solid #dbe4ff; background:linear-gradient(180deg,#eff4ff,#ffffff); border-radius:14px; text-align:center; }
.cta-box h3 { margin:0 0 6px; font-size:19px; }
.cta-box p { margin:0 0 14px; color:var(--text-soft); font-size:15px; }
.btn { display:inline-block; background:var(--accent); color:#fff; font-weight:600; padding:12px 22px; border-radius:8px; font-size:15px; transition:transform .1s ease, box-shadow .14s ease, filter .12s ease; }
.btn:hover { filter:brightness(1.04); box-shadow:0 10px 22px rgba(37,99,235,.28); transform:translateY(-1px); text-decoration:none; }

/* Blog index */
.blog-hero { text-align:center; padding:56px 20px 10px; max-width:680px; margin:0 auto; }
.blog-hero h1 { font-size:38px; letter-spacing:-.02em; margin:0 0 8px; }
.blog-hero p { color:var(--text-soft); font-size:18px; margin:0; }
.posts { max-width:760px; margin:30px auto 64px; padding:0 20px; display:grid; gap:18px; }
.post-card { display:block; border:1px solid var(--border); border-radius:14px; padding:22px 24px; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.post-card:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(15,23,42,.08); border-color:#d7def0; text-decoration:none; }
.post-card .eyebrow { color:var(--accent); font-weight:700; font-size:12px; letter-spacing:.05em; text-transform:uppercase; }
.post-card h2 { margin:6px 0 8px; font-size:21px; color:var(--text); }
.post-card p { margin:0; color:var(--text-soft); font-size:15px; }
.post-card .more { margin-top:12px; color:var(--accent); font-weight:600; font-size:14px; }

.article-foot { max-width:680px; margin:0 auto; padding:8px 20px 36px; }
.article-foot a { font-size:14px; }

/* Footer */
footer.site { border-top:1px solid var(--border); padding:26px 20px; color:var(--text-soft); font-size:13px; text-align:center; }
footer.site .fnav { margin-bottom:8px; }
footer.site a { color:var(--text-soft); text-decoration:underline; }

@media (max-width:560px){
  .article h1 { font-size:29px; }
  .blog-hero h1 { font-size:30px; }
}