/* Homepage V24 — approved correction: numbers 1, 2, 3 on the LEFT,
   vertically centered within each How It Works card. Not above the text.
   The step text remains left aligned; all artwork remains unchanged. */
#main > .how-section .step-card {
  display:grid;
  grid-template-columns:50px minmax(0,1fr);
  align-items:center;
  column-gap:14px;
}
#main > .how-section .step-top {
  display:flex;
  grid-column:1;
  grid-row:1;
  align-self:center;
  justify-self:center;
  align-items:center;
  justify-content:center;
  width:50px;
  margin:0;
}
#main > .how-section .step-top .step-number {
  display:grid;
  place-items:center;
  flex:none;
  width:44px;
  height:44px;
  padding:0;
  line-height:1;
  text-align:center;
}
#main > .how-section .step-copy {
  display:block;
  grid-column:2;
  grid-row:1;
  align-self:center;
  width:100%;
  min-width:0;
  text-align:left;
}
@media(max-width:559px){
  #main > .how-section .step-card {
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    column-gap:13px;
    align-items:center;
    padding:17px 18px;
  }
  #main > .how-section .step-top {
    grid-column:1;
    grid-row:1;
    width:48px;
    margin:0;
  }
  #main > .how-section .step-top .step-number {
    width:42px;
    height:42px;
  }
  #main > .how-section .step-copy {
    grid-column:2;
    grid-row:1;
    align-self:center;
  }
}