:root{
  --red:#E63946;
  --honeydew:#F1FAEE;
  --npblue:#A8DADC;
  --cerulean:#457B9D;
  --berkeley:#1D3557;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--honeydew);
  color:var(--berkeley);
  line-height:1.6;
}

p{
  margin: 0 0 14px;
}

.container{
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px;
}

.header{
  padding: 20px 0 10px;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.logo{
  height: 64px;
  width:auto;
  display:block;
}

.nav-link{
  color:var(--cerulean);
  text-decoration:none;
  font-weight:600;
}

.nav-link:hover{
  color:var(--berkeley);
  text-decoration: underline;
  text-decoration-color: var(--red);
}

.main{
  padding: 6px 0 48px;
}

.section{
  padding: 10px 0;
}

.section:first-of-type{
  padding-top: 0;
}

.lead{
  font-size: 18px;
  margin-bottom: 12px;
}

.quiet-list{
  list-style: none;
  padding-left: 0;
  margin: 14px 0 0;
}

.quiet-list{
  margin: 12px 0 0;
  padding-left: 20px;   /* controls indent of the dots */
  list-style: disc;
}

.quiet-list li{
  margin: 8px 0;
  padding-left: 0;      /* important: don’t offset the text */
  position: static;     /* important: reset */
}

.quiet-list li::marker{
  color: var(--cerulean);
}

.pivot{
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}

.break-desktop{ display: none; }
@media (min-width: 700px){
  .break-desktop{ display: inline; }
}

.capabilities li::marker{
  color: var(--cerulean);
}

.split{
  border-top: 1px solid rgba(168,218,220,0.35);
  padding-top: 22px;
}

.split-intro{
  margin: 0 0 12px;
}

.capabilities{
  margin: 0;
  padding-left: 18px;
}

.capabilities li{
  margin: 8px 0;
}

.closing{
  font-size: 18px;
}

.emph{
  color: var(--berkeley);
}

.footer{
  padding-top: 22px;
  border-top: 1px solid rgba(168,218,220,0.35);
  margin-top: 22px;
  color: var(--cerulean);
}

.footer a{
  color: var(--cerulean);
  text-decoration: none;
  font-weight: 600;
}

.footer a:hover{
  text-decoration: underline;
  text-decoration-color: var(--red);
}

@media (max-width: 520px){
  .logo{ height: 52px; }
  .pivot{ font-size: 20px; }
  .lead, .closing{ font-size: 17px; }
}