:root {
  --bone: #f3e9dc;
  --paper: #fffaf2;
  --ink: #2e211e;
  --line: #d5c2af;
  --blue: #e9583e;
}
.brand {
  text-transform: none;
  font-family: Georgia, serif;
  font-size: 22px;
}
.hero {
  grid-template-columns: 1fr 1fr;
  padding-top: 34px;
}
.hero-copy {
  background: #fff7ed;
  padding: 5vw;
  border-radius: 60px 8px 60px 8px;
}
.hero h1 {
  font-family: Georgia, serif;
  font-size: clamp(48px, 5.8vw, 88px);
  line-height: 0.94;
}
.hero-image {
  border-radius: 8px 80px 8px 80px;
}
.effect {
  background: #302420;
  border-radius: 72px 72px 0 0;
}
.effect h2,
.section-head h2,
.crm h2,
.calc-intro h2,
.extras h2,
.test h2 {
  font-family: Georgia, serif;
  font-weight: 400;
}
.proof b {
  color: #ff8c72;
}
.modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  border: 0;
}
.modules article {
  display: block;
  background: var(--paper);
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 28px;
}
.modules h3 {
  margin: 24px 0;
}
.modules small {
  display: block;
  margin-top: 24px;
}
.diptych {
  grid-template-columns: 1fr 1fr;
  background: #7c4e3f;
  padding: 5vw;
}
.diptych figure {
  margin: 0;
  background: #fff5e9;
  padding: 12px;
  border-radius: 6px;
}
.diptych img {
  height: 570px;
  object-fit: cover;
  border-radius: 3px;
}
.diptych figcaption {
  padding: 14px 4px 4px;
  font:
    14px Georgia,
    serif;
}
.crm {
  background: #fff6ea;
}
.record {
  border: 0;
  box-shadow: 10px 12px 0 #e9583e;
  transform: rotate(-1deg);
}
.calculator {
  background: #49352f;
  border-radius: 70px;
  margin: 2vw;
}
.zones span {
  background: #fff7ed;
  border-radius: 30px;
  margin: 5px;
  border: 0;
}
.extras {
  gap: 18px;
  padding: 18px;
}
.extras article {
  border-radius: 34px;
  background: #fff7ed;
}
.test {
  background: #e9583e;
  border-radius: 70px 70px 0 0;
}
.button,
.top-cta {
  border-radius: 999px;
}
footer {
  background: #302420;
  color: white;
}
@media (max-width: 800px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .modules {
    grid-template-columns: 1fr;
  }
  .hero-copy {
    border-radius: 38px 8px;
  }
  .diptych {
    grid-template-columns: 1fr 1fr;
  }
  .diptych img {
    height: 420px;
  }
}
@media (max-width: 480px) {
  .hero-copy {
    padding: 34px 20px;
  }
  .hero h1 {
    font-size: 43px;
  }
  .diptych {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .diptych img {
    height: 330px;
  }
  .calculator {
    margin: 0;
    border-radius: 45px;
  }
  .zones span {
    margin: 3px;
  }
  .extras {
    padding: 10px;
  }
  .test {
    border-radius: 44px 44px 0 0;
  }
}