:root{--ink:#0b1422;--navy:#071a33;--muted:#526071;--line:#dbe3ec;--soft:#f5f7fa;--warm:#b85b13;--accent:#0f7b62;--white:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0}
a{color:inherit}
.site-head{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:74px;padding:14px clamp(18px,5vw,64px);border-bottom:1px solid var(--line);background:#fff}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:780}
.brand-mark{width:40px;height:40px;display:grid;place-items:center;border-radius:8px;background:var(--navy);color:#fff}
.site-head>a:last-child{color:var(--muted);font-size:14px;font-weight:700;text-decoration:none}
main{max-width:980px;margin:0 auto;padding:30px clamp(18px,5vw,54px) 72px}
.breadcrumbs{font-size:13px;color:var(--muted);margin-bottom:38px}
.breadcrumbs a{text-decoration:none}
.eyebrow{margin:0 0 12px;color:var(--warm);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
h1{margin:0;max-width:820px;font-size:clamp(40px,6vw,68px);line-height:1.02;letter-spacing:0}
.lead{max-width:760px;margin:20px 0 0;color:var(--muted);font-size:clamp(18px,2.2vw,22px);line-height:1.55}
.answer{margin:32px 0 18px;padding:24px;border-left:5px solid var(--accent);background:var(--soft);border-radius:0 8px 8px 0}
.answer span{display:block;margin-bottom:7px;color:var(--accent);font-size:12px;font-weight:800;text-transform:uppercase}
.answer p{margin:0;font-size:20px;line-height:1.55}
.primary{display:inline-flex;align-items:center;justify-content:center;min-height:50px;margin:6px 0 42px;padding:0 20px;border-radius:8px;background:var(--navy);color:#fff;font-weight:780;text-decoration:none}
.content-section{padding:30px 0;border-top:1px solid var(--line)}
.content-section h2{margin:0 0 16px;font-size:clamp(26px,3vw,34px)}
.content-section p,.content-section li{color:var(--muted);font-size:17px;line-height:1.7}
.formula{padding:18px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:18px;font-weight:750;color:var(--navy)}
.example{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.example div{padding:16px;border-radius:8px;background:var(--soft)}
.example span{display:block;color:var(--muted);font-size:13px}
.example strong{display:block;margin-top:6px;font-size:19px}
.content-section ul{padding-left:22px}
.faq details{padding:16px 0;border-top:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:760;font-size:17px}
.faq p{margin:10px 0 0}
.sources{padding:22px;border:1px solid var(--line);border-radius:8px;background:var(--soft)}
.sources p{margin:0 0 12px}
.sources a{color:var(--accent);font-weight:700}
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.related a{padding:16px;border:1px solid var(--line);border-radius:8px;text-decoration:none;font-weight:740}
.related a:hover{border-color:#9fb1c5}
.reviewed{margin-top:16px;color:var(--muted);font-size:13px}
footer{display:flex;justify-content:space-between;gap:20px;padding:28px clamp(18px,5vw,64px);border-top:1px solid var(--line);color:var(--muted);font-size:14px}
footer strong{color:var(--ink)}
@media(max-width:680px){.site-head{align-items:flex-start}.site-head>a:last-child{max-width:110px;text-align:right}.example,.related{grid-template-columns:1fr}footer{display:grid}.answer p{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}