/* Desktop hero: level, matched transaction panels over the existing water. */
@media (min-width: 851px) {
  .hero::after {
    content: "";
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 94px;
    background: linear-gradient(to bottom, rgba(238, 247, 255, 0), rgba(238, 247, 255, .17) 40%, #f1f7ff 100%);
    pointer-events: none;
  }

  .hero-transfer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 50px;
    width: min(74%, 680px);
    max-width: 680px;
    margin-top: 101px;
    perspective: none;
  }

  .hero-transfer .transfer-line { display: none; }

  .hero-transfer .transfer-surface {
    box-sizing: border-box;
    width: 100%;
    height: 108px;
    min-height: 108px;
    min-width: 0;
    padding: 21px 27px;
    flex: none;
    gap: 22px;
    transform: none;
    border: 1px solid rgba(199, 234, 255, .78);
    border-top-color: rgba(239, 250, 255, .94);
    border-radius: 17px;
    background: linear-gradient(140deg, rgba(188, 220, 255, .19), rgba(48, 122, 194, .08) 55%, rgba(21, 74, 141, .15));
    box-shadow: inset 0 1px 1px rgba(255,255,255,.32), 0 9px 23px rgba(0, 19, 51, .17);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
  }

  .hero-transfer .surface-icon { width: 39px; height: 39px; flex: 0 0 39px; filter: none; }
  .hero-transfer .transfer-surface > div { min-width: 0; }
  .hero-transfer .transfer-surface strong { font-size: 20px; letter-spacing: .6px; }
  .hero-transfer .transfer-surface span { margin-top: 7px; font-size: 11px; letter-spacing: 0; }
  .hero-transfer .transfer-surface i,
  .hero-transfer .surface-arrow { display: none; }
}

@media (min-width: 851px) and (max-width: 1100px) {
  .hero-transfer { gap: 28px; margin-top: 82px; }
  .hero-transfer .transfer-surface { padding: 18px 20px; gap: 16px; }
}