@font-face { font-family: "Archivo Narrow"; src: url("../fonts/archivo-narrow-400.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo Narrow"; src: url("../fonts/archivo-narrow-600.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Archivo Narrow"; src: url("../fonts/archivo-narrow-700.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }

:root { --ink:#101414; --paper:#f6f7f2; --white:#fff; --line:#dce0d7; --muted:#54605d; --blue:#2087D5; --blue-deep:#165d94; --radius:22px; font-family:"Archivo Narrow",sans-serif; }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { margin:0; min-width:320px; color:var(--ink); background:var(--paper); font-size:18px; line-height:1.6; }
a { color:var(--blue-deep); }
a:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.shell { width:min(1120px, calc(100% - 48px)); margin:0 auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:88px; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; padding:12px 14px; border-radius:10px; background:var(--blue); }
.brand img { display:block; width:165px; height:auto; }
.header-nav { display:flex; flex-wrap:wrap; align-items:center; gap:20px; font-size:1rem; font-weight:600; }
.header-nav a { color:var(--ink); text-decoration:none; }
.header-nav a:hover { color:var(--blue-deep); text-decoration:underline; text-underline-offset:4px; }
.header-nav .nav-cta { padding:9px 14px; border-radius:10px; background:var(--blue); color:#fff; text-decoration:none; }
.header-nav .nav-cta:hover { color:#fff; filter:brightness(1.06); text-decoration:none; }
.eyebrow { margin:0 0 10px; color:var(--blue-deep); font-size:.86rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.hero { padding:62px 0 40px; max-width:800px; }
.hero h1 { max-width:760px; margin:0; font-size:clamp(2.6rem, 7vw, 5.1rem); font-weight:400; line-height:1.02; letter-spacing:-.025em; }
.hero p:last-child { max-width:650px; margin:21px 0 0; color:var(--muted); }
.articles { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; padding:16px 0 72px; }
.article-card { display:flex; flex-direction:column; min-height:290px; padding:26px; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); }
.article-card h2 { margin:0; font-size:1.55rem; font-weight:400; line-height:1.14; }
.article-card p { margin:14px 0 22px; color:var(--muted); font-size:1rem; line-height:1.5; }
.article-card a { margin-top:auto; font-weight:700; }
.tool-strip { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 0 72px; padding:26px 30px; border-radius:var(--radius); background:var(--ink); color:#fff; }
.tool-strip h2 { margin:0; font-size:1.5rem; font-weight:400; }
.tool-strip p { max-width:540px; margin:5px 0 0; color:#d2dcda; font-size:1rem; line-height:1.4; }
.button { display:inline-flex; flex:none; align-items:center; justify-content:center; min-height:46px; padding:10px 17px; border-radius:11px; background:var(--blue); color:#fff; font-size:1rem; font-weight:700; text-decoration:none; }
.button:hover { color:#fff; filter:brightness(1.06); text-decoration:none; }
.breadcrumb { padding-top:32px; font-size:.94rem; }
.breadcrumb a { text-underline-offset:3px; }
.article { max-width:760px; padding:28px 0 76px; }
.article-header { padding-bottom:32px; border-bottom:1px solid var(--line); }
.article-header h1 { margin:0; font-size:clamp(2.3rem, 6vw, 4.3rem); font-weight:400; line-height:1.07; letter-spacing:-.02em; }
.article-header .lede { margin:18px 0 0; color:var(--muted); font-size:1.18rem; line-height:1.5; }
.article-header time { display:block; margin-top:18px; color:var(--muted); font-size:.95rem; }
.article h2 { margin:42px 0 12px; font-size:2rem; font-weight:400; line-height:1.12; }
.article h3 { margin:28px 0 8px; font-size:1.35rem; line-height:1.2; }
.article p, .article li { color:#293432; }
.article ul, .article ol { padding-left:1.35em; }
.article li + li { margin-top:8px; }
.formula { margin:24px 0; padding:20px 22px; border-left:5px solid var(--blue); border-radius:0 14px 14px 0; background:#e8f4fc; color:#17394f; font-weight:600; line-height:1.45; }
.callout { margin:30px 0; padding:22px; border:1px solid #b7d9f2; border-radius:16px; background:#fff; }
.callout h2 { margin-top:0; font-size:1.5rem; }
.callout p { margin-bottom:0; }
.related { margin-top:54px; padding-top:26px; border-top:1px solid var(--line); }
.related h2 { margin-top:0; font-size:1.55rem; }
.related ul { list-style:none; margin:0; padding:0; }
.related li + li { margin-top:10px; }
.site-footer { padding:25px 0 40px; border-top:1px solid var(--line); color:var(--muted); font-size:.95rem; }
.site-footer a { text-underline-offset:3px; }
@media (max-width:800px) { .articles { grid-template-columns:1fr; } .article-card { min-height:0; } .tool-strip { display:block; } .tool-strip .button { margin-top:19px; } }
@media (max-width:620px) { .shell { width:min(100% - 32px, 1120px); } .site-header { align-items:flex-start; flex-direction:column; gap:12px; padding:14px 0; } .brand img { width:128px; } .header-nav { gap:14px; font-size:.94rem; } .hero { padding:42px 0 24px; } .articles { padding-bottom:46px; } .article { padding-top:20px; } .article h2 { font-size:1.7rem; } }