:root {
  --szp-bg: #fffdf7;
  --szp-yellow: #f9d65e;
  --szp-purple: #5f328f;
  --szp-gray: #414042;
}

body.sales-brand {
  font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--szp-gray);
  background-color: var(--szp-bg);
  background-image: linear-gradient(rgba(255, 253, 247, 0.94), rgba(255, 253, 247, 0.94)), url('/images/bg.png');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
  min-height: 100vh;
}

.brand-shell {
  max-width: 980px;
}

.brand-top {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.75rem;
}

.brand-top img.brand-logo-large {
  width: min(340px, 72vw);
  height: auto;
  margin-inline: auto;
  display: block;
}

.brand-title,
h1,
h2,
h3,
.form-label {
  color: var(--szp-purple);
}

.brand-card,
.card {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 10px 24px rgba(65, 64, 66, 0.12);
}

.btn-brand,
.btn-primary {
  --bs-btn-bg: var(--szp-yellow);
  --bs-btn-border-color: var(--szp-yellow);
  --bs-btn-hover-bg: #f3cb45;
  --bs-btn-hover-border-color: #f3cb45;
  --bs-btn-active-bg: #f3cb45;
  --bs-btn-active-border-color: #f3cb45;
  --bs-btn-color: var(--szp-purple);
  --bs-btn-hover-color: var(--szp-purple);
  --bs-btn-active-color: var(--szp-purple);
}

.btn-outline-brand,
.btn-outline-secondary {
  --bs-btn-color: var(--szp-purple);
  --bs-btn-border-color: var(--szp-purple);
  --bs-btn-hover-bg: var(--szp-purple);
  --bs-btn-hover-border-color: var(--szp-purple);
  --bs-btn-hover-color: #fff;
}

a {
  color: var(--szp-purple);
}

a:hover {
  color: #4f2777;
}

.toc-level-1 {
  font-size: 1.2rem;
  font-weight: 700;
}

@media (max-width: 768px) {
  .brand-top {
    margin-bottom: 1.25rem;
  }
}

.order-form.card {
  background-color: var(--szp-purple);
  box-shadow: 0 14px 34px rgba(65, 64, 66, 0.24);
}


.order-form .form-label,
.order-form .form-check-label {
  color: var(--szp-yellow);
}

.order-form h2,
.order-form h3,
.order-form .text-muted,
.order-form .form-check-label a {
  color: var(--szp-yellow) !important;
}

.legal-footer,
.legal-footer a {
  color: var(--szp-yellow);
}