:root {
  --ink: #252443;
  --green: #5751a6;
  --mint: #ebe9fb;
  --lime: #ffc95f;
  --cream: #fffaf4;
  --coral: #f47c68;
  --line: #e3dfdc;
}

.site-header { background: rgba(255, 250, 244, .92); }
.brand span { background: var(--green); border-radius: 11px; transform: rotate(-4deg); }
.button { background: var(--green); border-radius: 999px; padding-left: 25px; padding-right: 25px; }
.button-small { box-shadow: none; }
.hero { position: relative; }
.hero::before { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; background: #f8ded6; left: -105px; top: 90px; z-index: -1; }
.hero-visual { border-radius: 42% 58% 52% 48% / 54% 43% 57% 46%; box-shadow: inset 0 0 0 1px #d6d1f1; }
.meet-card { box-shadow: 11px 12px 0 #bbb5e6; }
.proof-strip, .subject-grid .custom { background: var(--green); }
.proof-strip div { border-left-color: #8580c3; }
.proof-strip strong { color: var(--lime); }
.how { background: #f0eefb; }
.cta { background: var(--ink); }
.cta-list { padding: 0; list-style: none; display: grid; gap: 12px; margin-top: 28px; }
.cta-list li::before { content: "✓"; display: inline-grid; place-items: center; width: 24px; height: 24px; background: var(--lime); color: var(--ink); border-radius: 50%; font-weight: 800; margin-right: 10px; }
.form-heading { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.form-heading > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--mint); color: var(--green); font-weight: 800; }
.form-heading b, .form-heading small { display: block; }
.form-heading b { font: 700 1.1rem Manrope; }
.form-heading small { color: #6c6b7b; }

@media (max-width: 540px) {
  .hero::before { display: none; }
}