:root{
  --ground:#ffffff;
  --surface:#f4f6f7;
  --ink:#14181f;
  --ink-2:#3f4a57;
  --muted:#6d7885;
  --rule:#dde2e8;
  --accent:#12617c;
  --accent-dark:#0e4b60;
  --accent-soft:#e6eef1;
  --maxw:720px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:16px/1.65 "Segoe UI",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
}
h1,h2,h3{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  color:var(--ink); font-weight:600; letter-spacing:-.01em;
}
p{margin:0 0 16px; color:var(--ink-2)}
a{color:var(--accent)}
strong{color:var(--ink)}
ul{margin:0 0 16px; padding-left:20px; color:var(--ink-2)}
li{margin:0 0 9px}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em; background:var(--surface); padding:1px 5px;
  border:1px solid var(--rule); border-radius:3px;
}

.topbar{height:4px; background:var(--accent)}
.inner{max-width:var(--maxw); margin:0 auto; padding:0 24px}

.nav{border-bottom:1px solid var(--rule)}
.nav .inner{
  display:flex; align-items:center; gap:10px;
  padding-top:15px; padding-bottom:15px;
  font-size:13px; letter-spacing:.02em;
}
.nav a{color:var(--muted); text-decoration:none}
.nav a:hover{color:var(--accent)}
.nav a.here{color:var(--ink); font-weight:600}
.nav .sep{color:var(--rule)}

.hero{background:var(--accent-soft); border-bottom:1px solid var(--rule)}
.hero .inner{padding-top:56px; padding-bottom:52px}
.kicker{
  margin:0 0 14px; font-family:"Segoe UI",-apple-system,sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent);
}
.hero h1{margin:0 0 18px; font-size:34px; line-height:1.18}
.hero-intro{margin:0; font-size:17px; line-height:1.6; color:var(--ink-2)}

.section .inner{padding-top:44px; padding-bottom:44px}
.section.band{background:var(--accent-soft)}

h2{font-size:22px; margin:0 0 18px; padding-bottom:10px; border-bottom:2px solid var(--accent)}
.section p:last-child{margin-bottom:0}
.lead{font-size:17px; color:var(--ink)}

.tiers{display:grid; gap:14px}
.tier{
  background:var(--ground); border:1px solid var(--rule);
  border-left:4px solid var(--accent); border-radius:4px; padding:20px 22px;
}
.tier h3{margin:0 0 8px; font-size:19px}
.tier p{margin:0 0 10px}
.tier p:last-child{margin-bottom:0}
.tier-meta{font-size:14px; color:var(--muted)}
.tier-meta a{font-weight:600}

.button,.download{
  display:inline-block; margin:4px 0 0; padding:12px 20px;
  background:var(--accent); color:#fff; font-weight:600;
  border-radius:3px; text-decoration:none; font-size:15px;
}
.button:hover,.download:hover{background:var(--accent-dark)}
.note{font-size:14px; color:var(--muted)}

.contact{
  padding:20px 22px; background:var(--surface);
  border:1px solid var(--rule); border-left:5px solid var(--accent); border-radius:4px;
}
.contact div{margin-bottom:2px}
.contact .name{font-weight:600; color:var(--ink)}
.contact a{text-decoration:none}

.footer{background:var(--ink); color:#9aa4b0}
.footer .inner{padding-top:30px; padding-bottom:40px; font-size:13px; line-height:1.7}
.footer a{color:#cdd5de}

/* product page body content */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px 72px}
.wrap header{padding:44px 0 24px; border-bottom:3px solid var(--accent)}
.wrap h1{font-size:30px; line-height:1.15; margin:0 0 8px}
.wrap .sub{color:var(--muted); font-size:15px; margin:0}
.wrap h2{font-size:20px; margin:40px 0 14px}
.wrap footer{
  margin-top:48px; padding-top:18px; border-top:1px solid var(--rule);
  font-size:13px; color:var(--muted);
}

@media (max-width:520px){
  .hero h1{font-size:27px}
  h2{font-size:20px}
  .wrap h1{font-size:26px}
}