/* Calm motion for a clinical product: movement happens once, on entry. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  transition: box-shadow 220ms ease, background-color 220ms ease;
}

.site-header.is-scrolled {
  box-shadow: 0 7px 24px rgba(20, 62, 96, 0.07);
}

section[id] {
  scroll-margin-top: 77px;
}

.desktop-nav a,
.footer-links a {
  position: relative;
}

.desktop-nav a::after,
.footer-links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--aqua);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}

.desktop-nav a:hover,
.footer-links a:hover {
  text-decoration: none;
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.footer-links a:hover::after,
.footer-links a:focus-visible::after {
  transform: scaleX(1);
}

@media (hover: hover) {
  .info-card,
  .price-card {
    transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
  }

  .info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 13px 30px rgba(26, 79, 122, 0.07);
    border-color: #c3d8e6;
  }

  .price-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 35px rgba(26, 79, 122, 0.09);
  }

  .icon-tile {
    transition: background-color 240ms ease, color 240ms ease;
  }

  .info-card:hover .icon-tile {
    background: #d9f0f3;
    color: var(--blue-dark);
  }
}

.faq-list details {
  transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.faq-list details:hover {
  border-color: #c3d8e6;
}

.faq-list details[open] {
  box-shadow: 0 8px 22px rgba(26, 79, 122, 0.035);
}

.faq-list details[open] p {
  animation: answer-enter 240ms ease both;
}

@keyframes answer-enter {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* This class is added only after JavaScript and IntersectionObserver are ready. */
.motion-ready .reveal {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 620ms cubic-bezier(.22, 1, .36, 1),
              transform 620ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.motion-ready .reveal:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}

.motion-ready .reveal.reveal-side:not(.is-visible) {
  transform: translate3d(26px, 0, 0);
}

@media (hover: hover) {
  .motion-ready .info-card.reveal.is-visible:hover {
    transform: translateY(-4px);
  }

  .motion-ready .price-card.reveal.is-visible:hover {
    transform: translateY(-3px);
  }
}

@media (max-width: 760px) {
  section[id] { scroll-margin-top: 73px; }

  .motion-ready .reveal.reveal-side:not(.is-visible) {
    transform: translate3d(0, 18px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .desktop-nav a::after,
  .footer-links a::after,
  .info-card,
  .price-card,
  .icon-tile,
  .faq-list details,
  .motion-ready .reveal {
    transition: none !important;
  }

  .motion-ready .reveal,
  .motion-ready .reveal:not(.is-visible),
  .motion-ready .reveal.reveal-side:not(.is-visible) {
    opacity: 1 !important;
    transform: none !important;
  }

  .button:hover,
  .button:active,
  .info-card:hover,
  .price-card:hover {
    transform: none !important;
  }

  .faq-list details[open] p { animation: none; }
}