@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800&display=swap");

:root {
  --wh-ink: #18201c;
  --wh-body: #3f4b45;
  --wh-muted: #6f7a73;
  --wh-purple: #674b7f;
  --wh-purple-soft: #9b86ae;
  --wh-linen: #f5f2f6;
  --wh-sky: #eee8f3;
  --wh-paper: #ffffff;
  --wh-line: rgba(24, 32, 28, 0.14);
}

body {
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background: var(--wh-linen) !important;
  color: var(--wh-body) !important;
  padding: 0 !important;
}

.page {
  width: min(960px, calc(100% - 32px)) !important;
  max-width: none !important;
  padding: 34px 0 48px;
}

nav {
  min-height: 64px;
  margin-bottom: 42px !important;
  border-bottom: 1px solid var(--wh-line);
}

.brand,
.logo h1 {
  color: var(--wh-ink) !important;
  letter-spacing: 0 !important;
}

.brand::before,
.logo h1::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: 9px;
  vertical-align: -7px;
  border-radius: 8px;
  background: var(--wh-purple) url("/favicon.svg") center / 22px 22px no-repeat;
}

.logo h1 {
  font-size: 1.25rem !important;
}

nav a,
footer a,
.support a,
.card a {
  color: var(--wh-purple) !important;
}

.hero,
section:first-of-type,
.logo {
  margin-bottom: 28px !important;
}

.eyebrow {
  color: var(--wh-purple) !important;
}

h1 {
  color: var(--wh-ink) !important;
  letter-spacing: 0 !important;
  max-width: 760px;
}

.lead,
.logo p,
.muted,
.card p,
.card li,
.faq p,
.support,
.support p,
footer {
  color: var(--wh-body) !important;
}

.grid,
.cards {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.card {
  background: var(--wh-paper) !important;
  border: 1px solid var(--wh-line) !important;
  border-radius: 8px !important;
  color: var(--wh-body) !important;
  box-shadow: 0 18px 44px rgba(52, 35, 67, 0.08);
}

.card h2,
.card h3 {
  color: var(--wh-ink) !important;
  border-color: var(--wh-line) !important;
}

.price {
  color: var(--wh-purple) !important;
}

.cta,
.btn {
  background: var(--wh-purple) !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.note,
.safety-bar {
  grid-column: 1 / -1;
  background: var(--wh-sky) !important;
  border: 1px solid var(--wh-line) !important;
  border-left: 4px solid var(--wh-purple) !important;
  border-radius: 8px !important;
  color: var(--wh-body) !important;
}

code {
  background: var(--wh-sky) !important;
  color: var(--wh-ink) !important;
}

footer {
  border-top: 1px solid var(--wh-line);
  padding-top: 22px;
}

@media (max-width: 720px) {
  .grid,
  .cards {
    grid-template-columns: 1fr !important;
  }
}