:root {
  font: 16px/1.6 system-ui;
  color: #17201d;
  background: #f7f8f6;
}
body {
  margin: 0;
}
header,
main,
footer {
  max-width: 1120px;
  margin: auto;
  padding: 24px;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  font-size: 22px;
  font-weight: 750;
  color: #17201d;
  text-decoration: none;
}
nav {
  display: flex;
  gap: 18px;
  align-items: center;
}
a {
  color: #205c48;
}
.button {
  border: 1px solid #92a99f;
  border-radius: 8px;
  padding: 9px 15px;
  text-decoration: none;
}
.primary {
  background: #173f33;
  color: white;
  border-color: #173f33;
}
.hero {
  padding: 100px 24px 120px;
  max-width: 760px;
}
.hero h1 {
  font-size: clamp(44px, 7vw, 74px);
  line-height: 1.05;
  letter-spacing: -0.045em;
  margin: 0.2em 0;
}
.hero p {
  font-size: 20px;
  color: #58665f;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px !important;
  color: #63736b !important;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
article,
section:not(.hero):not(.grid) {
  background: white;
  padding: 28px;
  border: 1px solid #dfe5e1;
  border-radius: 14px;
  margin-bottom: 22px;
}
.grid article {
  margin: 0;
}
footer {
  color: #69746f;
  border-top: 1px solid #dfe5e1;
  margin-top: 70px;
}
@media (max-width: 760px) {
  nav a:not(.button) {
    display: none;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .hero {
    padding: 70px 24px;
  }
}