/* goasto.com/payments/ only: the few rules product.css doesn't have. The drawn phone is product.css's .pd-pay-phone. */
.pm-mark { width: 30px; height: 30px; color: var(--teal); }

/* hero: the real Payments tab behind, the drawn Tap to Pay screen in front */
.pm-hero-art { height: 640px; }
.pm-art-desk { position: absolute; left: -40px; top: 84px; width: 470px; z-index: 1; transform: rotate(-2deg); transform-origin: 70% 30%; opacity: .96; }
.pm-art-phone { position: absolute; right: 0; top: 0; z-index: 2; margin: 0; width: 290px; }
.pm-art-phone .pd-pay-phone { width: 290px; }
.pm-art-phone .pd-caption { margin-top: 26px; font-size: 13px; text-align: right; max-width: 290px; }

/* Tap to Pay: a quiet drawing of the tap, not a fake screen */
.pd-feature.pm-tap { grid-template-columns: minmax(0, 1fr) 380px; }
.pm-tap-art { position: relative; margin: 0; height: 380px; display: grid; place-items: center; }
.pm-tap-ring { position: relative; width: 260px; height: 260px; display: grid; place-items: center; color: var(--teal); }
.pm-tap-ring span { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(79,195,184,.35); }
.pm-tap-ring span:nth-child(2) { inset: 36px; border-color: rgba(79,195,184,.5); }
.pm-tap-ring span:nth-child(3) { inset: 72px; background: rgba(79,195,184,.1); border-color: rgba(79,195,184,.7); }
.pm-tap-ring svg { position: relative; width: 64px; height: 64px; }
.pm-toast { left: auto; right: -8px; bottom: 18px; }
.pm-note { margin-top: 28px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--white-3); max-width: 48ch; }
.pm-note .pd-tag { font-size: 13px; font-weight: 500; color: var(--teal); padding: 5px 11px; border: 1px solid rgba(79,195,184,.4); border-radius: 999px; }

/* the close: three ways on */
.pm-close-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 32px; margin-bottom: 8px; }
.pd-close .pd-caption { max-width: 60ch; margin-top: 32px; }
.pd-close .pd-caption a { color: var(--white-2); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1100px) {
  .pm-art-desk { width: 440px; }
  .pm-art-phone, .pm-art-phone .pd-pay-phone { width: 260px; }
  .pd-feature.pm-tap { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 980px) {
  .pm-hero-art { height: 600px; max-width: 560px; }
  .pm-art-desk { left: 0; width: 420px; }
  .pd-feature.pm-tap { grid-template-columns: 1fr; }
  .pm-tap-art { height: 320px; }
}
@media (max-width: 640px) {
  .pm-mark { width: 24px; height: 24px; }
  .pm-hero-art { height: auto; max-height: none; display: flex; flex-direction: column; align-items: center; gap: 0; }
  .pm-art-desk { position: relative; left: auto; top: auto; width: 100%; transform: none; opacity: 1; }
  .pm-art-phone { position: relative; right: auto; top: auto; margin-top: -48px; width: min(260px, 70vw); }
  .pm-art-phone .pd-pay-phone { width: 100%; }
  .pm-art-phone .pd-caption { text-align: center; max-width: none; }
  .pm-tap-ring { width: 220px; height: 220px; }
  .pm-toast { right: 50%; transform: translateX(50%); bottom: 0; }
  .pm-close-links { flex-direction: column; align-items: stretch; }
  .pm-close-links .link-arrow { align-self: center; }
}