:root {
  --purchase-intro-top: 56px;
  --purchase-intro-bottom: 56px;
  --purchase-directory-gap: 28px;
  --purchase-note-width: 760px;
  --purchase-note-gap: 24px;
}

.purchase-intro {
  padding-top: var(--purchase-intro-top);
  padding-bottom: var(--purchase-intro-bottom);
}

.purchase-intro__note {
  max-width: var(--purchase-note-width);
  margin: var(--purchase-note-gap) auto 0;
  color: var(--on-field-soft);
  font-size: var(--size-small);
  text-align: center;
}

.purchase-directory {
  padding-top: var(--purchase-directory-gap);
}

.purchase-intro .app-store {
  max-width: 100%;
}

.purchase-intro .app-store__copy {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  :root {
    --purchase-intro-top: 28px;
    --purchase-intro-bottom: 36px;
  }
}