:root {
  --ink: #111;
  --muted: #777;
  --hero: #141414;
  --hero-fg: #f4f4f4;
  --hero-muted: #aaa;
  --accent: #86efac;
  --accent-dark: #22c55e; 
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

.sans-serif {
  font-family: -apple-system, BlinkMacSystemFont,
               "avenir next", avenir,
               "helvetica neue", helvetica,
               ubuntu,
               roboto, noto,
               "segoe ui", arial,
               sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.accent-link, 
.footer-accent-link {
  color: var(--accent-dark);
}

.accent-link:hover,
.footer-accent-link:hover {
  color: #15803d;
}

.cf::before,
.cf::after {
  content: " ";
  display: table;
}

.cf::after { clear: both; }

.dn { display: none; }
.db { display: block; }

.fl { float: left; }
.fr { float: right; }

.fw4 { font-weight: 400; }
.fw6 { font-weight: 600; }

.lh-title { line-height: 1.25; }
.lh-copy { line-height: 1.5; }

.mw9 { max-width: 96rem; }

.w-100 { width: 100%; }

.pa3 { padding: 1rem; }
.pb2 { padding-bottom: 0.5rem; }
.pt3 { padding-top: 1rem; }
.mb1 { margin-bottom: 0.25rem; }
.mb2 { margin-bottom: 0.5rem; }
.mb3 { margin-bottom: 1rem; }
.mb4 { margin-bottom: 2rem; }
.mb5 { margin-bottom: 3rem; }
.mt0 { margin-top: 0; }
.mt3 { margin-top: 1rem; }
.mr2 { margin-right: 0.5rem; }
.mr3 { margin-right: 1rem; }
.ml2 { margin-left: 0.5rem; }
.pl0 { padding-left: 0; }

.f1 { font-size: 3rem; }
.f2 { font-size: 2.25rem; }
.f3 { font-size: 1.5rem; }
.f4 { font-size: 1.25rem; }
.f5 { font-size: 1rem; }
.f6 { font-size: 0.875rem; }

.center {
  margin-right: auto;
  margin-left: auto;
}

.gray { color: var(--muted); }
.list { list-style-type: disc; }
.list li { margin-left: 1rem; }

.bb { border-bottom-style: solid; border-bottom-width: 1px; }
.bt { border-top-style: solid; border-top-width: 1px; }
.b--black-10 { border-color: rgba(0, 0, 0, 0.1); }

.flex-auto { flex: 1 1 auto; }

.hero {
  background: var(--hero);
  color: var(--hero-fg);
}

.hero a {
  color: var(--accent);
}

.hero a:hover,
.hero a:focus-visible {
  color: #bbf7d0;
  text-decoration: underline;
}

.hero-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.site-footer {
  margin-top: auto;
}

.footer-stuff {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  color: var(--muted);
  line-height: 1.5;
}

.footer-copy {
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  padding: 0.75rem 1rem 1.25rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}

.footer-line {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-z {
  display: block;
  height: 1.35em;
  width: auto;
  opacity: 0.75;
}

@media screen and (min-width: 30em) {
  .db-ns { display: block; }
  .dn-ns { display: none; }
  .fl-ns { float: left; }
  .nowrap-ns { white-space: nowrap; }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .pa4-m { padding: 2rem; }
}

@media screen and (min-width: 60em) {
  .pa5-l { padding: 4rem; }
  .f1-l { font-size: 3rem; }
}