/* Nimble Goods LLC. Type: Archivo for headings and buttons, Source Sans 3 for reading.
   Sizes used: 14.5, 16, 17, 19, 21, 24, 32, then the h1. */
:root{
  --paper:#fff;--card:#fff;--tint:#EEF3F4;--ink:#14202A;--soft:#35454F;--muted:#5F6E78;--rule:#D5DEE1;
  --brand:#1F4E5F;--brand-deep:#153844;--on-brand:#fff;--on-brand-soft:rgba(255,255,255,.82);--on-brand-rule:rgba(255,255,255,.2);
  --link:#1A5E73;--action:#E9A23B;--action-dark:#D78F25;--on-action:#14202A;--warn:#A23A16;
  --f-head:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-body:"Source Sans 3","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#0F181D;--card:#17232A;--tint:#141F25;--ink:#EEF2F4;--soft:#C5CFD6;--muted:#93A0AA;--rule:#2A3A43;
    --brand:#1B4453;--brand-deep:#0B1317;--link:#8FC7D8;--warn:#F0A07C;color-scheme:dark}
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 19px/1.6 var(--f-body)}
h1,h2,h3{font-family:var(--f-head);line-height:1.12;letter-spacing:-.012em;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--link);text-underline-offset:.16em}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--link);outline-offset:3px}
.shell{max-width:1120px;margin-inline:auto;padding-inline:20px}

.site-h{border-bottom:1px solid var(--rule)}
.site-h .shell{display:flex;align-items:center;flex-wrap:wrap;gap:8px 28px;padding-block:14px}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto;color:var(--ink);text-decoration:none;font:800 20px/1.15 var(--f-head);letter-spacing:-.012em}
.brand svg{width:34px;height:34px;display:block;flex:none}
.site-h nav{display:flex;flex-wrap:wrap;gap:4px 24px}
.site-h nav a{font:600 16px/1.2 var(--f-head);color:var(--soft);text-decoration:none;padding-block:6px}
.site-h nav a:hover{color:var(--link);text-decoration:underline}

.hero{background:var(--brand);color:var(--on-brand)}
.hero .shell{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px 56px;align-items:center;padding-block:60px 64px}
.hero h1{font-size:clamp(34px,4.6vw,52px);font-weight:800;line-height:1.05}
.hero p{font-size:21px;line-height:1.5;color:var(--on-brand-soft);margin-top:18px;max-width:31em}
.hero .art{width:100%;height:auto;display:block}
.btn{display:inline-flex;align-items:center;justify-content:center;font:700 18px/1.2 var(--f-head);text-decoration:none;cursor:pointer;
  padding:13px 22px;border-radius:6px;border:2px solid var(--action);background:var(--action);color:var(--on-action)}
.btn:hover{background:var(--action-dark);border-color:var(--action-dark)}
.btn.quiet{background:transparent;border-color:var(--rule);color:var(--ink)}
.btn.quiet:hover{border-color:var(--muted);background:transparent}
.hero .btn{margin-top:28px}

.sec{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px 48px;padding-block:56px;border-top:1px solid var(--rule)}
.sec.first{border-top:0}
.sec > h2{font-size:24px}
.sec > div{min-width:0}
.intro{font-size:21px;line-height:1.5;color:var(--soft);max-width:34em;margin-bottom:30px}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 40px}
.cols h3{font-size:20px;margin-bottom:6px}
.cols p{font-size:17px;line-height:1.55;color:var(--soft)}
.cols svg{width:30px;height:30px;display:block;margin-bottom:12px;stroke:var(--brand);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 40px}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:block;font:800 40px/1 var(--f-head);color:var(--link);margin-bottom:10px;font-variant-numeric:tabular-nums}
.steps h3{font-size:20px;margin-bottom:6px}
.steps p{font-size:17px;line-height:1.55;color:var(--soft)}
.about p{max-width:36em;color:var(--soft)}
.about p + p{margin-top:12px}
.facts{margin:26px 0 0;max-width:36em;display:grid;grid-template-columns:auto 1fr;font-size:17px}
.facts dt,.facts dd{margin:0;padding:11px 0;border-top:1px solid var(--rule)}
.facts dt{color:var(--muted);padding-right:32px}
.facts dd{font-weight:600}
.band{background:var(--tint);border-top:1px solid var(--rule)}
.band .sec{border-top:0}

.form{display:grid;gap:14px;max-width:34em;margin-top:22px}
.form label{display:grid;gap:5px;font:600 16px/1.3 var(--f-head)}
.form input,.form textarea{font:400 18px/1.4 var(--f-body);color:var(--ink);background:var(--card);border:1px solid var(--muted);border-radius:6px;padding:10px 12px;width:100%}
.form textarea{min-height:150px;resize:vertical}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn{justify-self:start}
.formnote{font-size:17px;color:var(--soft)}
.formnote.bad{color:var(--warn)}
.formnote.good{font-weight:600;color:var(--ink)}

.site-f{background:var(--brand-deep);color:var(--on-brand-soft);font-size:16px}
.site-f .shell{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;padding-block:28px 34px}
.site-f a{color:var(--on-brand-soft)}
.site-f a:hover{color:var(--on-brand)}
.site-f nav{display:flex;gap:22px}

.pagehead{background:var(--tint);border-bottom:1px solid var(--rule)}
.pagehead .shell{padding-block:34px 36px}
.pagehead h1{font-size:clamp(30px,4vw,44px);font-weight:800}
.pagehead p{font-size:21px;line-height:1.5;color:var(--soft);margin-top:12px;max-width:36em}
.page{padding-block:34px 60px}
.page h2{font-size:24px;margin:34px 0 8px}
.page > :first-child,.page > div > :first-child{margin-top:0}
.page > div{margin-top:34px}
.page p{max-width:36em;color:var(--soft)}
.page p + p{margin-top:12px}

@media (max-width:900px){
  .hero .shell{grid-template-columns:1fr;padding-block:36px 40px}
  .hero .art{max-width:420px}
  .sec{grid-template-columns:1fr;padding-block:40px}
  .cols,.steps{grid-template-columns:1fr;gap:26px}
}
@media (max-width:600px){body{font-size:18px}.hero p,.intro{font-size:19px}}