/* The same destination card closes each step in the guided site route. */
a.next-link {
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 230px;
  height: 65px;
  max-width: none;
  padding: 11px 16px 11px 19px;
  border: 1px solid rgba(127, 200, 255, .75);
  border-left: 4px solid var(--blue);
  background: #173b5d;
  color: #eaf6ff;
  box-shadow: 0 9px 30px rgba(0, 0, 0, .25);
  font: 700 10px var(--mono);
  letter-spacing: .14em;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  transition: background .2s, border-color .2s, transform .2s;
}
a.next-link .next-link-copy { display: grid; gap: 5px; }
a.next-link strong { color: #fff; font: 800 18px var(--display); letter-spacing: .035em; }
a.next-link .next-link-arrow { color: var(--blue); font: 400 27px var(--body); }
a.next-link:hover, a.next-link:focus-visible { border-color: #d5edff; background: #205781; transform: translateY(-2px); }
a.next-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.about-card-final .next-link { align-self: flex-start; margin-top: clamp(24px, 4vh, 42px); }

@media (max-width: 700px) {
  a.next-link { width: clamp(190px, 60vw, 230px); }
  .slide-link.next-link { right: 50%; bottom: 40px; transform: translateX(50%); }
  .slide-link.next-link:hover, .slide-link.next-link:focus-visible { transform: translate(50%, -2px); }
  .roles-page .slide-link.next-link { bottom: 30px; }
  .about-card-final .next-link { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  a.next-link { transition: none; }
}