/* Client palette: soft butter yellow, dusty pink, and mauve #B97F97.
   Keep the horse film and its mist treatment; use the palette on every CTA. */
:root {
  --mauve: #b97f97;
  --mauve-deep: #795061;
  --dusty-pink: #dca9ae;
  --butter: #f3de96;
  --ink: #44333d;
  --muted: #6b5962;
  --paper: #fffdfc;
  --line: #dec8cf;
  --sand: #efdce1;
  --silver: #f6eab9;
  --pale-beige: #f6eab9;
}

/* Keep the original horse film, overlays and typography intact. */
.hero {
  --ink: #343b3b;
  --muted: #69706e;
  color: var(--ink);
}

header .brand, footer .brand { color: #654655; }
header nav a, .nav-cta, .text-link { color: var(--mauve-deep); }
header nav a { text-decoration-color: var(--mauve); text-underline-offset: 6px; }
header nav a:hover { text-decoration-line: underline; }
.text-link:hover, .nav-cta:hover { color: #563746; }
.nav-cta, .text-link { border-color: #b98b9e; }
body > :not(main) :is(a, button):focus-visible,
main > :not(.hero) :is(a, button, summary):focus-visible {
  outline-color: var(--mauve-deep);
}
main > :not(.hero) .eyebrow, dialog .eyebrow { color: var(--mauve-deep); }
h2 em { color: var(--mauve-deep); }

.trust {
  background: #f6eab9;
  box-shadow: 0 0 0 100vmax #f6eab9;
  border-color: #ddcc8f;
  color: #655244;
}
.trust span:before { color: var(--mauve-deep); }
.feelings, .questions { background: #efdce1; }
.questions details { border-color: #d6b9c4; }
summary span, summary b { color: var(--mauve-deep); }
.feelings > figure img, .package-image { filter: none; opacity: 1; }
.feelings figcaption {
  background: linear-gradient(transparent, rgba(64, 36, 50, .68));
  text-shadow: 0 1px 10px rgba(49, 28, 39, .15);
}

.process { background: #f6eab9; }
.steps article { border-color: #cfb98f; }
.steps span { color: var(--mauve-deep); }
.package { background: #fff7dd; border-color: #e4d6b7; }
.package.featured { background: #ebd4da; border-color: var(--dusty-pink); }
.package:last-child { background: #f6e9ee; border-color: #dec8d1; }
.package h3 { color: #654655; }
.package li:before { color: var(--mauve-deep); }
.package button { border-color: var(--mauve); color: var(--mauve-deep); }
.package button:hover { color: #563746; }
.package-note a { border-color: var(--mauve); }
.package.recommended { outline-color: var(--mauve-deep); }
.package.recommended:before { color: var(--mauve-deep); }

.quiz-section { background: #f1e2e7; }
.chooser-banner { background: #fcf3dc; }
.chooser-banner:after {
  background: linear-gradient(90deg, rgba(255, 248, 231, .98), rgba(255, 248, 231, .94) 25%, rgba(255, 248, 231, .67) 43%, rgba(255, 248, 231, .08) 68%);
}
.quiz-panel, .chooser-layout > .quiz-panel { background: #fffbf7; }
.quiz-small { color: var(--muted); }
.quiz-panel label { border-color: #dfcbd2; }
.quiz-panel label:hover { background: #fbf0f3; }
.quiz-panel label:has(input:checked) { background: #ecd4de; border-color: var(--mauve-deep); }
.quiz-panel label:has(input:focus-visible) { outline-color: var(--mauve-deep); }
.quiz-panel input { accent-color: var(--mauve-deep); }
.quiz-panel legend > span, legend > span { color: var(--mauve-deep); }
#package-quiz legend { background: #f6eab9; }
.quiz-panel .text-reset, .text-reset { border-color: var(--mauve); }

main .button, dialog .button, #package-quiz > .button {
  background: var(--mauve);
  border-color: var(--mauve);
  color: #30232b;
}
main .button:hover, dialog .button:hover, #package-quiz > .button:hover {
  background: var(--mauve-deep);
  border-color: var(--mauve-deep);
  color: #fff;
}
main .link-arrow,
main .link-arrow svg,
header .link-arrow, header .link-arrow svg {
  color: inherit;
  stroke: currentColor;
}
.hero .button:focus-visible { outline-color: var(--mauve-deep); }
.film-controls button {
  color: var(--mauve-deep);
  background: rgba(253, 241, 246, .82);
  border-color: #c69aaf;
}
.film-controls button:hover { background: #f4e3eb; }

.about-name { background: #edd2da; }
.about-name > div em { color: var(--mauve-deep); }
.about-name > span, .about-name > p { color: #654655; }
.contact { background: linear-gradient(120deg, #f5e8b1, #ecd0d8); }
footer > span { color: #7c6570; }
dialog { background: var(--paper); border-color: #c69aaf; }
dialog::backdrop { background: #45303c70; }

@media (max-width: 650px) {
  .chooser-banner:after {
    background: linear-gradient(90deg, rgba(255, 248, 231, .97), rgba(255, 248, 231, .90) 45%, rgba(255, 248, 231, .47));
  }
}