:root{
    --deep:#2e2679;
    --light:#cfb8f9;
    --pale:#f5f1ff;
    --mid:#7c6bc4;
    --white:#fff;
    --g50:#f9fafb;
    --g100:#f3f4f6;
    --g200:#e5e7eb;
    --g300:#d1d5db;
    --g400:#9ca3af;
    --g500:#6b7280;
    --g700:#374151;
    --g800:#1f2937;
    --g900:#0f172a;
    --green:#059669;
    --serif:'Playfair Display',Georgia,serif;
    --sans:'DM Sans',-apple-system,system-ui,sans-serif;
    --mw:1140px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--g700);background:var(--white);-webkit-font-smoothing:antialiased;line-height:1.6}
img{max-width:100%;display:block}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,0,0,.04)}
.nav-w{max-width:var(--mw);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:68px}
.n-logo{display:flex;align-items:center;gap:9px;text-decoration:none}
.n-logo img{height:36px;border-radius:50%}
.n-logo span{font-weight:700;font-size:20px;color:var(--deep);letter-spacing:-.4px}
.n-links{display:flex;align-items:center;gap:32px;list-style:none}
.n-links a{text-decoration:none;color:var(--g500);font-size:14px;font-weight:500;transition:color .2s}
.n-links a:hover{color:var(--deep)}
.n-cta{background:var(--deep);color:var(--white)!important;padding:9px 22px;border-radius:7px;font-weight:600!important;transition:all .2s}
.n-cta:hover{background:#3a2f9e}
.m-btn{display:none;background:none;border:none;cursor:pointer;padding:8px}
.m-btn span{display:block;width:20px;height:2px;background:var(--g700);margin:4px 0;border-radius:1px}
.m-nav{display:none;position:fixed;top:68px;left:0;right:0;background:var(--white);padding:12px 24px 20px;z-index:99;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.m-nav.open{display:block}
.m-nav a{display:block;padding:12px 0;color:var(--g500);font-size:15px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--g100)}

/* ARTICLE HERO */
.art-hero{padding:120px 0 48px;background:var(--g50);border-bottom:1px solid var(--g100)}
.art-hero-w{max-width:720px;margin:0 auto;padding:0 24px}
.art-cat{display:inline-block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--mid);margin-bottom:16px}
.art-hero h1{font-family:var(--serif);font-size:40px;font-weight:600;color:var(--g900);line-height:1.2;letter-spacing:-.5px;margin-bottom:16px}
.art-meta{font-size:14px;color:var(--g400);display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.art-meta .dot{width:4px;height:4px;background:var(--g300);border-radius:50%}

/* ARTICLE BODY */
.art-body{max-width:720px;margin:0 auto;padding:48px 24px 80px}
.art-body p{font-size:16.5px;line-height:1.8;color:var(--g700);margin-bottom:24px}
.art-body h2{font-family:var(--serif);font-size:28px;font-weight:600;color:var(--g900);margin:48px 0 20px;line-height:1.3}
.art-body h3{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--g900);margin:36px 0 16px;line-height:1.35}
.art-body ul,.art-body ol{margin:0 0 24px 24px;font-size:16.5px;line-height:1.8;color:var(--g700)}
.art-body li{margin-bottom:8px}
.art-body strong{color:var(--g800);font-weight:600}
.art-body a{color:var(--deep);text-decoration:underline;text-underline-offset:2px}
.art-body a:hover{color:var(--mid)}
.art-body blockquote{border-left:3px solid var(--deep);padding:16px 24px;margin:32px 0;background:var(--pale);border-radius:0 8px 8px 0}
.art-body blockquote p{margin:0;font-size:16px;color:var(--g800);font-style:italic}

/* TLDR BOX */
.tldr{background:var(--pale);border:1px solid rgba(46,38,121,.1);border-radius:12px;padding:24px 28px;margin:0 0 40px}
.tldr-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--deep);margin-bottom:8px}
.tldr p{font-size:15px;line-height:1.7;color:var(--g700);margin:0}

/* STAT CALLOUT */
.stat-call{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0}
.sc-box{background:var(--g50);border:1px solid var(--g100);border-radius:12px;padding:20px;text-align:center}
.sc-box .num{font-family:var(--serif);font-size:28px;font-weight:700;color:var(--deep)}
.sc-box .lbl{font-size:12.5px;color:var(--g400);margin-top:4px}

/* TEMPLATE BOX */
.tmpl{background:var(--g50);border:1px solid var(--g100);border-radius:10px;padding:20px 24px;margin:20px 0;position:relative}
.tmpl-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--mid);margin-bottom:8px}
.tmpl p{font-size:15px;line-height:1.6;color:var(--g800);margin:0;font-style:italic}

/* COMPARISON TABLE */
.cmp-tbl{width:100%;border-collapse:collapse;margin:24px 0 32px;font-size:14.5px}
.cmp-tbl th{background:var(--deep);color:var(--white);padding:12px 16px;text-align:left;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.cmp-tbl td{padding:12px 16px;border-bottom:1px solid var(--g100);color:var(--g700)}
.cmp-tbl tr:nth-child(even) td{background:var(--g50)}

/* CTA BANNER */
.art-cta{background:var(--deep);border-radius:14px;padding:40px 36px;text-align:center;margin:48px 0}
.art-cta h3{font-family:var(--serif);font-size:24px;color:var(--white);margin-bottom:12px}
.art-cta p{font-size:15px;color:rgba(255,255,255,.6);margin-bottom:24px}
.art-cta a{display:inline-flex;align-items:center;gap:8px;background:var(--white);color:var(--deep);padding:12px 28px;border-radius:8px;font-size:14px;font-weight:600;text-decoration:none;transition:all .2s}
.art-cta a:hover{background:var(--light);transform:translateY(-1px)}

/* RELATED ARTICLES */
.related{border-top:1px solid var(--g100);padding:48px 0;max-width:720px;margin:0 auto}
.related h3{font-family:var(--serif);font-size:22px;color:var(--g900);margin-bottom:24px;padding:0 24px}
.rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 24px}
.rel-card{background:var(--g50);border:1px solid var(--g100);border-radius:12px;padding:20px;text-decoration:none;transition:all .2s}
.rel-card:hover{border-color:var(--light);box-shadow:0 4px 16px rgba(46,38,121,.06);transform:translateY(-2px)}
.rel-card .rc-cat{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--mid);margin-bottom:6px}
.rel-card h4{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--g900);line-height:1.3}

/* FOOTER */
.ft{padding:40px 0 28px;background:var(--g900)}
.ft-w{max-width:var(--mw);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center}
.ft-logo{display:flex;align-items:center;gap:8px}
.ft-logo img{height:28px;border-radius:50%}
.ft-logo span{font-weight:700;font-size:16px;color:var(--white)}
.ft p{font-size:12px;color:rgba(255,255,255,.3)}

@media(max-width:640px){
    .art-hero h1{font-size:30px}
    .stat-call{grid-template-columns:1fr}
    .rel-grid{grid-template-columns:1fr}
    .n-links{display:none}.m-btn{display:block}
    .ft-w{flex-direction:column;gap:12px;text-align:center}
}