/* MamaHerstel: Sabine's own colours and fonts, loaded after the engine's stylesheet. */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Raleway:wght@400;500;600;700&family=Dancing+Script:wght@600;700&display=swap");

:root {
  --mh-peach: #f1cab2;
  --mh-teal: #84b1b2;
  --mh-pink: #efa4aa;
  --mh-navy: #284758;
  --mh-cream: #fdf8f2;
  --mh-navy-dark: #1d3542;
  --mh-teal-soft: #e3eff0;
  --mh-pink-soft: #fbe6e7;
  --mh-peach-soft: #f9e8dc;
  --mh-text: #3a4a54;
  --mh-head: "Playfair Display", Georgia, "Times New Roman", serif;
  --mh-body: "Raleway", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --mh-script: "Dancing Script", "Brush Script MT", cursive;

  --accent: var(--mh-navy);
  --ink: var(--mh-navy);
  --bg: var(--mh-cream);
  --font: var(--mh-body);
}

body { background: var(--mh-cream); color: var(--mh-text); font-family: var(--mh-body); }
.site-head { background: var(--mh-cream); border-bottom: 1px solid #efe4d6; }
.site-head .wordmark { font-family: var(--mh-script); font-size: 30px; font-weight: 700; color: var(--mh-navy); letter-spacing: 0; text-transform: none; }
.site-foot { background: var(--mh-navy); color: #e8eef1; }
.site-foot a { color: var(--mh-peach); }
.site-foot .foot-biz { color: #c9d6dc; }

/* The sales page */
.dp {
  --dp-accent: #284758;
  --dp-accent-hover: #1d3542;
  --dp-deep: #284758;
  --dp-deepest: #1d3542;
  --dp-deep-card: #335a6e;
  --dp-gold: #f1cab2;
  --dp-mark: #fbe0e2;
  --dp-cream: #fdf8f2;
  --dp-ink: #284758;
  --dp-text: #3a4a54;
  --dp-muted: #5f7079;
  --dp-faint: #8a979e;
  --dp-line: #eadfd2;
  --dp-card-line: #e6d6c8;
  --dp-head: "Playfair Display", Georgia, "Times New Roman", serif;
  --dp-body: "Raleway", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  background: var(--mh-cream);
  font-size: 18px;
}
.dp h1, .dp h2, .dp h3 { font-weight: 600; letter-spacing: 0; line-height: 1.15; }
.dp h1 { font-weight: 700; }
.dp mark { background: linear-gradient(transparent 55%, var(--mh-pink-soft) 55%); padding: 0 0.08em; border-radius: 0; color: var(--mh-navy); font-style: italic; }

/* Small headings above each section, in Sabine's handwriting font */
.dp-eyebrow {
  background: transparent;
  color: var(--mh-pink);
  font-family: var(--mh-script);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 0 8px;
}
.dp-path .dp-eyebrow { background: transparent; color: var(--mh-peach); }
.dp-announce { background: var(--mh-teal); color: #ffffff; letter-spacing: 0.06em; font-family: var(--mh-body); font-weight: 600; }

.dp-hero { background: linear-gradient(180deg, var(--mh-peach-soft) 0%, var(--mh-cream) 100%); padding-bottom: 20px; }
.dp-hero .dp-image { border-radius: 24px; box-shadow: 0 18px 44px rgba(40, 71, 88, 0.16); }
.dp-sub { font-size: 19px; }
.dp-qualifier { color: var(--mh-teal); font-weight: 600; font-style: normal; }
.dp-image { border-radius: 20px; }

.dp-btn {
  background: var(--mh-navy);
  font-family: var(--mh-body);
  font-weight: 700;
  font-size: 19px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(40, 71, 88, 0.25);
}
@media (hover: hover) {
  .dp-btn:hover { background: var(--mh-navy-dark); box-shadow: 0 14px 30px rgba(40, 71, 88, 0.3); }
}
.dp-btn:focus-visible { outline-color: var(--mh-pink); }
.dp-price .dp-now, .dp-just { color: var(--mh-navy); }

.dp-guarantee-box { background: #ffffff; border: 2px solid var(--mh-teal); border-radius: 20px; }
.dp-stats { background: var(--mh-teal); }
.dp-stat-value { color: #ffffff; font-family: var(--mh-head); font-weight: 700; }
.dp-stat-label { color: rgba(255, 255, 255, 0.92); font-weight: 600; }

.dp-card { border-radius: 20px; border-color: var(--dp-card-line); box-shadow: 0 10px 26px rgba(40, 71, 88, 0.06); }
.dp-old { background: var(--mh-pink-soft); border-color: var(--mh-pink); }
.dp-old h3 { color: #b0565e; }
.dp-new { background: var(--mh-teal-soft); border: 2.5px solid var(--mh-teal); box-shadow: 0 16px 36px rgba(40, 71, 88, 0.1); }
.dp-checks li::before { color: var(--mh-teal); }
.dp-crosses li::before { color: #c96a72; }

.dp-quote { background: #ffffff; }
.dp-quote p { font-family: var(--mh-head); font-style: italic; font-size: 18px; color: var(--mh-navy); }
.dp-mini-guarantee { background: var(--mh-navy); border-radius: 20px; }
.dp-strip { background: var(--mh-peach-soft); border-radius: 20px; }

.dp-path { background: var(--mh-navy); }
.dp-module { background: #335a6e; border-radius: 20px; }
.dp-module-number { background: var(--mh-peach); color: var(--mh-navy); border-radius: 999px; font-family: var(--mh-head); }

.dp-step-number { background: var(--mh-pink); color: #ffffff; font-family: var(--mh-head); }
.dp-guarantee-panel { background: var(--mh-teal); color: #ffffff; border-radius: 24px; }
.dp-guarantee-panel h2 { color: #ffffff; }
.dp-guarantee-panel .dp-checks li::before { color: #ffffff; }
.dp-recap { background: #ffffff; border: 2px solid var(--mh-peach); border-radius: 24px; }
.dp-pricebox { border: 2px solid var(--mh-teal); border-radius: 24px; box-shadow: 0 16px 40px rgba(40, 71, 88, 0.1); }
.dp-pill { background: var(--mh-pink); color: #ffffff; }
.dp-case h3 span { color: var(--mh-pink); }
.dp-chips li { background: var(--mh-teal-soft); border-color: var(--mh-teal); color: var(--mh-navy); }
.dp-gallery img { border-radius: 20px; border-color: var(--dp-card-line); }
.dp-faq summary { font-weight: 600; font-size: 19px; }
.dp-faq summary::after { color: var(--mh-pink); }

/* The waitlist page (/free) */
main:has(#optinForm) { max-width: 560px; padding-top: 0; }
main:has(#optinForm)::before {
  content: "";
  display: block;
  height: 240px;
  margin: 20px 0 22px;
  border-radius: 24px;
  background: url("/img/sabine.jpg") center 25% / cover no-repeat;
  box-shadow: 0 18px 44px rgba(40, 71, 88, 0.16);
}
main:has(#optinForm) h1 { font-weight: 700; font-size: clamp(30px, 7vw, 42px); line-height: 1.15; margin: 0 0 14px; }
main:has(#optinForm) .lede { font-size: 18px; color: var(--mh-text); }
main:has(#optinForm) .includes { list-style: none; padding: 0; margin: 18px 0 22px; }
main:has(#optinForm) .includes li { position: relative; padding-left: 30px; margin: 10px 0; }
main:has(#optinForm) .includes li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--mh-teal); font-weight: 800; }
#optinForm { background: #ffffff; border: 2px solid var(--mh-peach); border-radius: 24px; padding: 22px 18px; box-shadow: 0 16px 40px rgba(40, 71, 88, 0.08); }
#optinForm .field { border-radius: 14px; border-color: #e6d6c8; background: var(--mh-cream); font-family: var(--mh-body); }
#optinForm .btn { width: 100%; background: var(--mh-navy); border-radius: 999px; font-weight: 700; font-size: 18px; }
#optinForm .warn { font-size: 13px; color: #6b7a82; }

/* The checkout and the other pages */
main.co {
  --co-tint: #e3eff0;
  --co-ring: #84b1b2;
  --co-text: #3a4a54;
  --co-accent: #284758;
  --co-accent-hover: #1d3542;
  --co-deep: #284758;
  --co-gold: #f1cab2;
  --co-cream: #fdf8f2;
  --co-ink: #284758;
  --co-head: "Playfair Display", Georgia, "Times New Roman", serif;
  --co-body: "Raleway", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
}
h1, h2, h3 { font-family: var(--mh-head); color: var(--mh-navy); }
.btn { background: var(--mh-navy); border-radius: 999px; font-family: var(--mh-body); }