/* Shared contact navigation and icon motion, using the RateWise palette. */
.nav > a[aria-current="page"], .mobile-menu > a[aria-current="page"] { color: var(--blue-300); }
.nav > a[aria-current="page"] { background: rgba(50,134,255,.13); }
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-header .nav, .site-header .nav-actions { display: none; }
  .site-header .nav-toggle { display: inline-flex; }
  .mobile-menu { display: flex; }
}
@media (min-width: 1280px) {
  .header-inner { gap: 16px; }
  .nav { gap: 0; }
  .nav > a, .nav > .has-mega > a { padding-inline: 8px; white-space: nowrap; font-size: 13px; }
  .nav-actions .btn { padding-inline: 14px; font-size: 13px; white-space: nowrap; }
}
.rw-flow-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 68px; height: 68px; border-radius: 19px; border: 1px solid #dce6f4;
  color: #1459d9; background-color: #fff;
  background-image: linear-gradient(135deg, #fff 0%, #fff 35%, #1459d9 57%, #3286ff 77%, #a8d4ff 100%);
  background-size: 450% 160%; background-position: 0% 50%;
  box-shadow: 0 8px 22px -12px #183b7855, inset 0 1px 0 #fff;
  transition: background-position .85s cubic-bezier(.22,.61,.36,1), color .65s ease, box-shadow .65s ease, transform .65s ease;
}
.rw-flow-icon svg { width: 30px; height: 30px; }
[data-icon-card]:is(:hover, :focus-visible, :focus-within) .rw-flow-icon {
  background-position: 100% 50%; color: #fff; transform: translateY(-3px);
  border-color: #94b7ef; box-shadow: 0 12px 26px -12px #1459d966, inset 0 1px 0 #ffffff80;
}
.rw-flow-icon--round { border-radius: 50%; outline: 1px solid #fff; outline-offset: 7px; width: 62px; height: 62px; }
.rw-home .rw-story .rw-index { display: flex; align-items: center; gap: 14px; }
.rw-home .rw-story .rw-flow-icon { width: 48px; height: 48px; border-radius: 14px; }
.rw-home .rw-story .rw-flow-icon svg { width: 24px; height: 24px; }
@media(max-width: 639px) { .rw-home .rw-story .rw-index { flex-wrap: wrap; font-size: 10px; gap: 9px; } }
@media(prefers-reduced-motion: reduce) {
  .rw-flow-icon { transition: none; }
  [data-icon-card]:is(:hover, :focus-visible, :focus-within) .rw-flow-icon { transform: none; }
}

/* Keep the interactive demo easy to find in both navigation layouts. */
.nav > a.nav-demo { color: var(--blue-200); background: rgba(50,134,255,.12); box-shadow: inset 0 0 0 1px rgba(50,134,255,.24); }
.nav > a.nav-demo:hover, .nav > a.nav-demo:focus-visible { color: #fff; background: rgba(50,134,255,.24); }
.mobile-menu > a.nav-demo { color: var(--blue-200); }