/* Mobile hero payment and collection panels, aligned with the approved preview. */
@media (max-width: 640px) {
  .hero-transfer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: min(89%, 440px);
    margin-top: 91px;
    perspective: none;
  }

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

  .hero-transfer .transfer-surface {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 82px;
    height: 100%;
    padding: 14px 10px;
    gap: 8px;
    flex: none;
    transform: none;
    border: 1px solid rgba(204, 238, 255, .76);
    border-top-color: rgba(240, 250, 255, .89);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(185, 222, 255, .21), rgba(39, 117, 198, .14) 64%, rgba(17, 76, 148, .19));
    box-shadow: inset 0 1px 1px rgba(255,255,255,.31), 0 7px 18px rgba(1, 21, 50, .19);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .hero-transfer .surface-icon {
    flex: 0 0 21px;
    width: 21px;
    height: 21px;
    filter: none;
  }

  .hero-transfer .transfer-surface > div { min-width: 0; }
  .hero-transfer .transfer-surface strong { font-size: 14px; line-height: 1.35; letter-spacing: .5px; }
  .hero-transfer .transfer-surface span {
    display: block;
    margin-top: 5px;
    font-size: clamp(8px, 2.2vw, 10px);
    line-height: 1.35;
    letter-spacing: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .hero-transfer .transfer-surface i,
  .hero-transfer .surface-arrow { display: none; }
}

@media (max-width: 350px) {
  .hero-transfer { gap: 8px; }
  .hero-transfer .transfer-surface { padding: 12px 7px; gap: 6px; }
  .hero-transfer .surface-icon { flex-basis: 19px; width: 19px; height: 19px; }
}