:root{
  --bg:#f9f9fb;
  --text:#111;
  --muted:#666;
  --line:#ddd;
  --header:#111;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  margin:0;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
}
header{
  background:var(--header);
  color:white;
  padding:22px 0;
}
.container{
  width:900px;
  max-width:92%;
  margin:auto;
}
nav{
  display:flex;
  flex-wrap:wrap;
  gap:14px 20px;
}
nav a{
  color:white;
  text-decoration:none;
  font-weight:500;
}
nav a:hover{
  text-decoration:underline;
}
h1,h2,h3{
  font-weight:600;
  line-height:1.2;
  margin:0 0 18px;
}
h1{font-size:40px;}
h2{font-size:24px; margin-top:34px;}
h3{font-size:18px; margin-top:28px;}
p,ul{margin:0 0 18px;}
ul{padding-left:22px;}
.hero,.section{padding:56px 0;}
.hero img,.section img{
  max-width:100%;
  height:auto;
  display:block;
  margin:28px 0;
}
.lead{
  font-size:20px;
}
.note,
.small{
  font-size:14px;
  color:var(--muted);
}
.rule{
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:26px;
}
footer{
  border-top:1px solid var(--line);
  margin-top:20px;
  padding:30px 0 36px;
  font-size:14px;
  color:#555;
}
footer p{margin-bottom:14px;}
a{color:inherit;}
@media (max-width:700px){
  h1{font-size:32px;}
  .lead{font-size:18px;}
}