/* Conny's look on the pages the engine writes: the checkout, the thank-you
   page and the legal pages. It loads after the engine's own styles and only
   changes colours, fonts and buttons, never what a page does. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400;1,9..144,500&family=Nunito+Sans:wght@400;700;800&display=swap");

:root {
  --co-cream: #FBF6EA;
  --co-ink: #3F3A33;
  --co-muted: #6B6358;
  --co-head: "Fraunces", Georgia, "Times New Roman", serif;
  --co-body: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
}

body {
  background: #FBF6EA;
  color: #3F3A33;
  font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3,
.co h1, .co h2, .co-price {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.co-bump-title, #payBtn {
  font-family: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Buttons: soft yellow with dark text, like the lead magnet. */
.btn,
#payBtn {
  background: #F2D27A;
  color: #3F3A33;
  border-radius: 999px;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 22px -10px rgba(170, 125, 20, 0.7);
}

.btn:hover,
#payBtn:hover {
  background: #E6BE55;
  color: #3F3A33;
}

#payBtn:focus-visible,
.btn:focus-visible {
  outline: 3px solid #3F3A33;
  outline-offset: 3px;
}