/* ===== mobile-fixes.css: responsive-only fixes (phones/tablets). No colours, fonts or desktop layout are changed here. ===== */

/* Pricing checkout: the grid column could not shrink below its content, so the box ran off-screen on phones */
@media (max-width:960px){
  .pay__box{grid-template-columns:minmax(0,1fr)}
}
.pay__main,.pay__sum,.pay__plans,.pay__methods,.pay__card{min-width:0;max-width:100%}
.pay__card input{width:100%;min-width:0;box-sizing:border-box}
.pay__sum-plan{overflow-wrap:anywhere}
.pay__methods{grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr))}
.pay__row>label{min-width:0}
@media (max-width:420px){
  .pay__methods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pay__tile{padding:14px 12px}
  .pay__lines div{flex-wrap:wrap}
}

/* Meet the Team: the animated gold ring and photo stuck out past the screen edge */
@media (max-width:980px){
  .member__photo{position:relative;top:auto;margin-inline:12px}
  .member__ring{inset:-8px}
}

/* About / Philosophy / Kids: decorative gold ball hung off the left edge */
@media (max-width:700px){
  .story__orb{left:-8px;width:84px;height:84px}
}

/* Book a Class: icon + heading sat side by side and squeezed the title on small phones */
@media (max-width:520px){
  .book__head,.book__amelia-head{flex-direction:column;align-items:flex-start;gap:12px}
}

/* Pricing checkout: plan rows keep their price on its own line so the plan name is not squeezed */
@media (max-width:520px){
  .pay__plan span{flex:1 1 calc(100% - 40px)}
}

/* Footer decorations (orbs, lotus) were wider than very small phones */
@media (max-width:700px){
  .site-footer{overflow-x:clip}
}