:root{--u1:#444;--u2:#666;--u3:#2563eb;--sp-a:1.875rem;--sp-b:30px}
*{margin:0;padding:0}
html{box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
body{font:16px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#F5F5F5;color:rgb(51,51,51)}
.wrap{max-width:60rem;padding:0 1.25rem;margin:0 auto}
header{background:hsl(0,0%,100%);padding:1.25rem 0;border-bottom:1px solid #ddd}
header .wrap{align-items:center;display:flex;justify-content:space-between}
header h1{font:normal 1.375rem -apple-system;font-weight:400;color:#222}
nav{gap:var(--sp-b);display:flex}
nav a[href]{color:#555;text-decoration:none;font-size:15px}
nav a:hover{color:rgb(0,0,0)}
section.banner{background:#fff;text-align:center;padding:60px 0}
:is(.banner,.metrics) h2{margin-bottom:15px;font:normal 32px -apple-system;color:rgba(34,34,34,1)}
.banner p{max-width:600px;color:var(--u2);font-size:17px;margin:0 auto 30px}
a.btn-primary{padding:12px 30px;background:var(--u1);display:inline-block;color:#FFF;font-size:.9375rem;text-decoration:none}
.btn-primary:hover{background:var(--u3)}
section#modules{padding:50px 0;background:hsl(0,0%,96%)}
:where(#modules) h3{color:#222222;margin-bottom:var(--sp-a);text-align:center;font:normal 24px -apple-system}
.module-grid{display:flex;flex-wrap:wrap;gap:var(--sp-b);justify-content:center}
.module{padding:25px;background:hsl(0,0%,100%);box-shadow:0 1px 3px rgba(0,0,0,0.12);flex:1 1 calc(50% - 15px);min-width:280px;max-width:calc(50% - 15px)}
.module h4{margin-bottom:10px;color:rgb(34,34,34);font:normal 18px -apple-system}
.module p{line-height:1.6;font-size:15px;color:var(--u2)}
.metrics{border-top:1px solid #e0e0e0;background:hsl(0,0%,100%);padding:2.5rem 0;border-bottom:1px solid #e0e0e0}
.metrics .wrap{justify-content:space-around;text-align:center;display:flex}
.metric strong{margin-bottom:5px;font-size:28px;display:block;color:#222}
.metric span{font-size:14px;color:rgba(136,136,136,1)}
footer{color:#aaa;padding:40px 0 20px;background:rgb(42,42,42)}
.footer-cols{gap:40px;grid-template-columns:repeat(3,1fr);display:grid;margin-bottom:var(--sp-b)}
.footer-cols section{flex-flow:column;gap:8px;display:flex}
footer h5{margin-bottom:.3125rem;text-transform:uppercase;color:#FFF;letter-spacing:1px;font:normal 14px -apple-system}
:where(footer) a[href]{font-size:.875rem;color:#aaaaaa;text-decoration:none}
footer a:hover{color:hsl(0,0%,100%)}
.notice{padding-top:20px;color:rgb(119,119,119);border-top:1px solid var(--u1);font-size:13px;text-align:center}
@media (max-width:48rem){
header .wrap{gap:1.25rem;flex-flow:column}
nav{place-content:center;gap:24px}
:is(.banner,.metrics) h2{font-size:28px}
.module-grid{flex-direction:column}
.module{max-width:100%;flex:1 1 100%}
.metrics .wrap{gap:1.25rem;flex-flow:column}
.footer-cols{gap:25px;grid-template-columns:1fr}
}