/* Homepage V23 — centered numeral badges (1,2,3) in How It Works.
   Only badge placement and mobile layout of the three cards change.
   All approved watercolor backgrounds, lily, and other content unchanged. */
#main > .how-section .step-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
#main > .how-section .step-top {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 11px;
}
#main > .how-section .step-top .step-number {
  display:grid;
  place-items:center;
  flex:none;
  width:44px;
  height:44px;
  border-radius:50%;
  line-height:1;
  text-align:center;
  padding:0;
}
#main > .how-section .step-copy {
  width:100%;
  min-width:0;
  display:block;
  grid-column:auto;
  grid-row:auto;
  text-align:left;
}
@media(max-width:559px){
  #main > .how-section .step-card{
    display:flex;
    flex-direction:column;
    gap:0;
    padding:16px 18px 19px;
  }
  #main > .how-section .step-top {
    grid-column:auto;
    grid-row:auto;
    margin-bottom:8px;
  }
  #main > .how-section .step-top .step-number{width:42px;height:42px}
  #main > .how-section .step-copy{grid-column:auto;grid-row:auto}
}
@media(min-width:560px){
  #main > .how-section .step-top {margin-bottom:12px}
}