/* Phone tidy-ups so nothing sits off to one side. Buttons stacked one above the other share one full width, readouts
   sit under their dials instead of on top of them, and groups that leave a gap are centred. Wider screens are unchanged. */
@media(max-width:700px){
  /* Stacked buttons: same width, text in the middle */
  .actions>.btn,.fines-cta>.btn,.rn-cta>.btn,.rn-call-a>.btn,.rw-cta>.btn{flex:1 1 100%;justify-content:center;text-align:center}

  /* End of page buttons: the arrow sits at the edge so the words stay in the middle */
  .pg-go .pg-prev,.pg-go .pg-next{position:relative;padding-inline:52px}
  .pg-go .pg-prev>i,.pg-go .pg-next>i{position:absolute;top:50%;transform:translateY(-50%)}
  .pg-go .pg-prev>i{left:22px}
  .pg-go .pg-next>i{right:22px}

  /* Car pager: a hidden "back" button no longer pushes the dots and "Next page" off centre */
  .g-pg:disabled{display:none}

  /* "Tap one below" prompts span the whole row */
  .ez-lead{width:auto}
}

@media(max-width:560px){
  /* Payment dials: the numbers go under each dial so they no longer cover it */
  .cx-cluster{align-items:start}
  .cx-g svg{margin-bottom:-14%}
  .cx-g .g-read,.cx-g.lg .g-read{position:static;margin-top:6px}

  /* Interest rate box: the note goes under the rate instead of a thin column beside it */
  .cx-rate{grid-template-columns:1fr}

  /* Credit choices: the last row fills the width instead of leaving an empty slot */
  .cx-tiers{display:flex;flex-wrap:wrap}
  .cx-tiers button{flex:1 1 30%}
}