:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202822;
  background: #f7f7f4;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  line-height: 1.65;
}

.page {
  width: min(100% - 40px, 760px);
  margin-inline: auto;
  padding: clamp(42px, 9vw, 92px) 0 56px;
}

.hero { padding-bottom: 34px; }
.eyebrow { margin: 0 0 20px; color: #58645d; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2.45rem, 8vw, 4.6rem); letter-spacing: -.055em; line-height: 1.05; }
.role { margin: 10px 0 24px; color: #28704f; font-size: clamp(1.15rem, 4vw, 1.55rem); font-weight: 600; }
.intro { max-width: 680px; margin: 0; color: #47534b; font-size: 1.08rem; }

section { margin-top: 30px; }
h2 { margin: 0 0 8px; font-size: .82rem; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.proof { padding: 18px 0 20px; border-top: 1px solid #d9ded9; }
.proof h3 { margin: 0; font-size: 1.18rem; letter-spacing: -.015em; }
.proof p { max-width: 680px; margin: 8px 0 0; color: #47534b; }
.links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 7px 0 0; }
a { color: #176b49; text-underline-offset: .2em; }
a:hover { color: #0c4930; }
a:focus-visible { outline: 3px solid #b26032; outline-offset: 3px; border-radius: 2px; }
.commercial { padding-top: 20px; border-top: 1px solid #d9ded9; }
.commercial p, footer p { margin: 8px 0 0; color: #47534b; }
footer { margin-top: 34px; padding-top: 20px; border-top: 1px solid #d9ded9; }

@media (max-width: 520px) {
  .page { width: min(100% - 32px, 760px); padding-top: 40px; }
  .hero { padding-bottom: 24px; }
  section { margin-top: 24px; }
  .proof { padding-block: 15px 17px; }
  .intro { font-size: 1rem; }
}