:root {
  --hp-text-body: #5a6a7d;
  --hp-text-body-2: #6b7a8d;
  --hp-text-body-3: #69768c;
  --hp-text-faint: #9aacbc;
  --hp-text-strong-muted: #3a4a5c;
  --hp-border-faint: #e0ebf6;
  --hp-purple-border: #e8e0ff;
  --hp-purple-shadow: rgba(124, 92, 255, 0.07);
  --hp-fw-extrabold: 800;
  --hp-section-max-width: 1180px;
  --hp-section-padding-y: 7rem;
  --hp-section-padding-y-sm: 4rem;
}

.hp-page,
.hp-page *,
.hp-page *::before,
.hp-page *::after {
  box-sizing: border-box;
}

.hp-page {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-page-bg);
}

.hp-page h1,
.hp-page h2,
.hp-page h3,
.hp-page p {
  overflow-wrap: break-word;
}

.hp-container {
  max-width: var(--hp-section-max-width);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.hp-container--narrow {
  max-width: 850px;
}

.hp-section {
  padding-block: var(--hp-section-padding-y);
  position: relative;
}

.hp-section--white {
  background: var(--color-surface);
}

.hp-section--tint {
  background: rgba(228, 247, 255, 0.3);
}

@media (max-width: 900px) {
  .hp-section {
    padding-block: var(--hp-section-padding-y-sm);
  }
}

@media (max-width: 576px) {
  .hp-container {
    padding-inline: 1.125rem;
  }
}