:root {
  color-scheme:light;
  --ink:#243329;
  --bg:#f7f5ed;
  --green:#42664d;
  --line:#d8dfd2}

* {
  box-sizing:border-box}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.65 system-ui,-apple-system,sans-serif}

a {
  color:var(--green)}

header,main,footer {
  max-width:900px;
  margin:auto;
  padding:24px}

header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px}

header a {
  text-decoration:none}

nav {
  display:flex;
  gap:18px;
  flex-wrap:wrap}

.brand {
  font-size:1.35rem;
  font-weight:800;
  color:var(--ink)}

.hero {
  padding:100px 24px 75px}

h1 {
  font-size:clamp(2.8rem,8vw,5rem);
  line-height:1.1;
  letter-spacing:-.05em;
  margin:0 0 20px}

h2 {
  font-size:1.65rem;
  line-height:1.3}

p {
  max-width:65ch}

.muted {
  color:#526158}

.card {
  border:1px solid var(--line);
  border-radius:18px;
  padding:28px;
  background:#fff}

.button {
  display:inline-block;
  background:var(--green);
  color:#fff;
  text-decoration:none;
  padding:10px 18px;
  border-radius:8px;
  font-weight:650}

footer {
  border-top:1px solid var(--line);
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  font-size:.9rem}

main.legal {
  min-height:60vh;
  padding-top:55px;
  padding-bottom:75px}

@media(max-width:520px) {
header  {
  align-items:flex-start;
  flex-direction:column}

.hero {
  padding-top:55px}

}