html { background: #eee6f2; }

body {
  max-width: 1440px;
  margin: 0 auto;
  box-shadow: 0 0 70px rgba(57, 45, 73, .12);
}

.site-header { padding-left: clamp(24px, 5.5vw, 80px); padding-right: clamp(24px, 5.5vw, 80px); }
.hero-copy { padding-left: clamp(32px, 8vw, 115px); padding-right: clamp(32px, 8vw, 115px); }
.section { padding-left: clamp(24px, 8vw, 115px); padding-right: clamp(24px, 8vw, 115px); }
.benefits p { padding-left: clamp(24px, 5.5vw, 80px); padding-right: clamp(24px, 5.5vw, 80px); }
.social-strip { padding-left: clamp(24px, 8vw, 115px); padding-right: clamp(24px, 8vw, 115px); }
footer { padding-left: clamp(24px, 5.5vw, 80px); padding-right: clamp(24px, 5.5vw, 80px); }

@media (max-width: 1440px) {
  html { background: var(--cream); }
  body { max-width: none; box-shadow: none; }
}