:root { --navy:#0d1a29; --ink:#142333; --muted:#627182; --paper:#f5f7f9; --card:#fff; --line:#dce3ea; --blue:#245cf5; --gold:#e7b65d; --soft-blue:#eaf0ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.7 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
.container { width:min(1100px,calc(100% - 40px)); margin:0 auto; }
.site-header { border-bottom:1px solid var(--line); background:rgba(245,247,249,.94); }
.nav { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.04em; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; background:var(--blue); color:#fff; }
.nav-links { display:flex; gap:20px; color:var(--muted); font-size:.86rem; font-weight:700; }
.nav-links a:hover { color:var(--blue); }
.back { display:inline-flex; margin:45px 0 25px; color:var(--blue); font-size:.86rem; font-weight:800; }
.eyebrow { color:var(--blue); font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.eyebrow::before { content:""; display:inline-block; width:25px; height:2px; margin:0 10px 3px 0; background:var(--gold); }
.article-head { max-width:820px; padding:28px 0 48px; }
h1,h2,h3 { color:var(--ink); line-height:1.08; letter-spacing:-.045em; }
h1 { margin:17px 0 20px; font-size:clamp(2.6rem,6vw,5.1rem); }
h2 { margin:44px 0 15px; font-size:clamp(1.65rem,3vw,2.4rem); }
h3 { margin:29px 0 8px; font-size:1.25rem; }
.dek { max-width:700px; color:var(--muted); font-size:1.14rem; }
.meta { margin-top:22px; color:var(--muted); font-size:.8rem; }
.article-layout { display:grid; grid-template-columns:minmax(0,760px) 250px; gap:65px; align-items:start; padding-bottom:90px; }
.article { min-width:0; padding:34px 0 0; }
.article p { margin:0 0 17px; color:#415264; }
.article ul,.article ol { margin:0 0 22px; padding-left:23px; color:#415264; }
.article li { margin:8px 0; }
.answer { margin:0 0 32px; padding:22px 24px; border-left:4px solid var(--blue); background:var(--soft-blue); color:var(--ink); font-weight:600; }
.article strong { color:var(--ink); }
.article a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.article-cta { margin-top:46px; padding:27px; border-radius:10px; background:var(--navy); color:#fff; }
.article-cta p { color:#c3cfdb; }
.article-cta a { display:inline-block; margin-top:14px; color:#fff; font-weight:800; text-decoration:none; }
.sidebar { position:sticky; top:25px; padding:20px; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.sidebar strong { display:block; margin-bottom:12px; font-size:.84rem; }
.sidebar a { display:block; padding:8px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:.8rem; line-height:1.35; }
.sidebar a:last-child { border-bottom:0; }
.sidebar a:hover { color:var(--blue); }
.blog-intro { max-width:760px; padding:65px 0 45px; }
.blog-intro h1 { margin-top:17px; }
.article-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; padding-bottom:90px; }
.article-card { display:flex; min-height:250px; flex-direction:column; justify-content:space-between; padding:27px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.article-card:hover { border-color:var(--blue); }
.article-card h2 { margin:18px 0 12px; font-size:1.55rem; }
.article-card p { color:var(--muted); font-size:.9rem; }
.article-card .read { margin-top:20px; color:var(--blue); font-size:.82rem; font-weight:800; }
.tag { display:inline-block; width:max-content; padding:5px 9px; border-radius:4px; background:var(--soft-blue); color:var(--blue); font-size:.68rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
footer { padding:30px 0 42px; background:var(--navy); color:#aab8c6; font-size:.8rem; }
.footer-row { display:flex; justify-content:space-between; gap:20px; }
.footer-row a:hover { color:#fff; }
@media (max-width:800px) { .article-layout { grid-template-columns:1fr; gap:20px; } .sidebar { position:static; order:-1; } .article-grid { grid-template-columns:1fr; } }
@media (max-width:520px) { .container { width:min(100% - 28px,1100px); } .nav-links a:not(:last-child) { display:none; } h1 { font-size:2.7rem; } }