:root { --magenta: #d0006f; }

/* Magenta is a signature detail, never a background theme. */
.hero .eyebrow,
.case .eyebrow,
.intake .eyebrow { color: #ff4fa9; }

.nav nav > a:not(.button)::after,
.quiet-link::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  margin-top: 3px;
  background: var(--magenta);
  transition: width .2s ease;
}

.nav nav > a:not(.button):hover::after,
.quiet-link:hover::after { width: 100%; }

.button { position: relative; overflow: hidden; }
.button::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--magenta);
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform .2s ease;
}
.button:hover::before { transform: scaleX(1); }

.price li b { color: var(--magenta); }
.steps b { box-shadow: inset 0 -3px 0 var(--magenta); }
.score strong small { color: #ff4fa9; }
.scorelines i:after { background: linear-gradient(90deg, var(--magenta) 0 7%, var(--white) 7% 100%); }
.hero-image figcaption { border-left: 3px solid var(--magenta); }

::selection { background: var(--magenta); color: white; }

@media (prefers-reduced-motion: reduce) {
  .nav nav > a:not(.button)::after,
  .quiet-link::after,
  .button::before { transition: none; }
}