/* High-resolution Twin Pay application imagery — 29 September 2026.
   Separate and versioned to avoid stale caches and preserve the existing site theme. */
.hero-home .phone img, .download-hero-phones .phone img { object-fit:contain; image-rendering:auto; }
@media (min-width:951px) {
  .hero-home .phone-showcase {height:625px;}
  .hero-home .phone-centre {width:262px;}
  .hero-home .phone-left,.hero-home .phone-right {width:219px;}
}
.app-screens-section { background:linear-gradient(180deg,#fff 0%,#f5faf8 100%);padding:82px 0 94px; }
.app-screens-section .section-title { margin-bottom:32px; }
.app-screens-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));gap:20px; }
.app-screen-card { display:block;min-width:0;background:white;border:1px solid #e2ece8;border-radius:19px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 12px 34px rgba(23,35,51,.035);transition:transform .2s,box-shadow .2s,border-color .2s; }
.app-screen-card:hover { transform:translateY(-4px);box-shadow:0 17px 40px rgba(23,35,51,.1);border-color:#b3d6c7; }
.app-screen-card:focus-visible { outline:3px solid #08739a;outline-offset:4px; }
.app-screen-visual { min-height:385px;background:linear-gradient(140deg,#f4faf8,#edf5f7);display:flex;justify-content:center;align-items:center;padding:18px 10px 0;overflow:hidden; }
.app-screen-visual img { display:block;width:auto;max-width:85%;height:365px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 11px 13px rgba(14,36,35,.13)); }
.app-screen-caption { display:flex;flex-direction:column;gap:5px;padding:17px 20px 21px; }
.app-screen-caption strong { color:#172333;font-size:15px;letter-spacing:-.025em; }
.app-screen-caption span { color:#617080;font-size:12px;line-height:1.55; }
@media (max-width:950px) {
  .app-screens-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;}
  .app-screens-section {padding:63px 0 72px;}
}
@media (max-width:650px) {
  .app-screens-grid {gap:12px;}
  .app-screen-card {border-radius:14px;}
  .app-screen-visual {min-height:0;padding:12px 5px 0;}
  .app-screen-visual img {height:auto;max-width:88%;width:100%;filter:drop-shadow(0 5px 9px rgba(14,36,35,.11));}
  .app-screen-caption {padding:11px 12px 16px;}
  .app-screen-caption strong {font-size:12px;}
  .app-screen-caption span {font-size:10px;}
}
@media (prefers-reduced-motion: reduce){.app-screen-card{transition:none}}

/* Homepage three-phone hero: gently increase scale without changing the
   original full-resolution PNG screenshots or other page phone layouts. */
@media (min-width:1141px) {
  .hero-home .phone-showcase { transform:scale(1.08); }
}
@media (min-width:951px) and (max-width:1140px) {
  .hero-home .phone-showcase { transform:scale(.97); }
}
@media (min-width:651px) and (max-width:950px) {
  .hero-home .phone-showcase { transform:scale(.94); }
}
@media (min-width:391px) and (max-width:650px) {
  .hero-home .phone-showcase { transform:scale(.73); }
}
@media (max-width:390px) {
  .hero-home .phone-showcase { transform:scale(.63); }
}