/* Banking Partners only. Shared styles: /assets/site/site.css
   kid-view.html is Andre's kid-app prototype, shipped as-is inside the phone frame;
   assets/ holds the two images it loads by relative path. */


@media (max-width:720px){
  /* Section rhythm: desktop spacing x0.55, 20px gutters (full-bleed sections stay full-bleed) */
  .banking-s1{padding:66px 20px 55px !important;}
  .banking-s2{padding:66px 20px 66px !important;}
  .banking-s3{padding:66px 20px 66px !important;}
  .banking-s4{padding:72px 20px 72px !important;}

  /* Relationship journey: five stage tabs become a sideways strip with full labels */
  .banking-stages{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:-20px !important;margin-right:-20px !important;padding:0 20px 6px;scroll-padding-left:20px;}
  .banking-stages > div > button{flex:none;min-width:132px;scroll-snap-align:start;}
  .banking-stages > div{display:contents;}

  /* Hero: the two sticky notes sit under the phone instead of covering the "Presented by" bar */
  .banking-hero-phone{flex-direction:column;gap:12px;}
  .banking-note{position:static !important;transform:none !important;max-width:none !important;width:min(280px,100%);}

  /* Hero phone keeps the desktop 1:2 shape and shrinks; the kid app inside is scaled, not re-flowed */
  .banking-phone{width:min(280px,100%) !important;height:auto !important;aspect-ratio:360 / 720;border-width:8px !important;border-radius:38px !important;}
  .banking-logo-text{white-space:nowrap;font-size:11px;}
}