/* The hero cards lead to the existing payment and collection guides. */
.hero-transfer .transfer-surface[href] {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}

.hero-transfer .transfer-surface[href]:hover {
  border-color: #e9f9ff;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 11px 26px rgba(0,32,74,.3), 0 0 18px rgba(108,197,255,.2);
}

.hero-transfer .transfer-surface[href]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-color: #e9f9ff;
}

@media (min-width: 641px) and (max-width: 850px) {
  .hero-transfer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 20px;
    width: min(85%, 680px);
    perspective: none;
  }
  .hero-transfer .transfer-line,
  .hero-transfer .transfer-surface i,
  .hero-transfer .surface-arrow { display: none; }
  .hero-transfer .transfer-surface {
    width: 100%;
    min-width: 0;
    min-height: 105px;
    flex: none;
    transform: none;
    background: linear-gradient(140deg, rgba(188,220,255,.19), rgba(48,122,194,.08) 55%, rgba(21,74,141,.15));
  }
}