/* ===== MA99 mobile reading layer (phone layer v1) · applies at phone widths only ===== */
@media (max-width:760px){
  html{-webkit-text-size-adjust:100%}
  body{overflow-x:hidden}
  /* navigation: thumb sized menu button */
  #burger{display:flex !important;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;font-size:1.5rem;line-height:1;border-radius:10px}
  #burger:focus:not(:focus-visible){outline:none;box-shadow:none;border-color:transparent}
  nav .in{padding-top:10px;padding-bottom:10px}
  nav .logo{min-height:40px;display:flex;align-items:center}
  /* readable small type */
  .chip{font-size:.72rem;letter-spacing:.12em;line-height:1.45;padding:7px 12px;max-width:100%;white-space:normal}
  .rprog{font-size:.68rem;letter-spacing:.07em;padding:4px 9px}
  .note,p.note{font-size:.78rem;line-height:1.55}
  .lbl,.lbl2,.pth{font-size:.7rem}
  .rcase .rsub,.rsub{font-size:.8rem}
  .ev{font-size:.72rem}
  .prod .lv{font-size:.66rem}
  .paymicro{font-size:.8rem}
  /* buttons: full width, centred, easy to tap */
  .btnrow{flex-direction:column;align-items:stretch;gap:12px}
  .btnrow>.btn,.btnrow>.pill,.btnrow>a,.btnrow>button{width:100%;text-align:center;justify-content:center;padding-top:15px;padding-bottom:15px}
  .ctaband .btn,.ctaband .pill,.ctaband a.btn{display:block;width:100%;max-width:360px;margin-left:auto !important;margin-right:auto !important;text-align:center}
  #rxBtn{width:100%;text-align:center}
  /* squeezed multi column grids become single column */
  .docgrid,.docgrid.four,.cgrid{grid-template-columns:1fr !important;gap:14px}
  .docgrid .card,.cgrid .card{width:auto}
  .wlrow{flex-direction:column;align-items:stretch}
  .wlrow input,.wlrow select,.wlrow .btn{flex:1 1 auto;width:100%}
  /* premium rows on Services: give the tinted panel breathing room */
  .pglrow.prem{padding-left:16px !important;padding-right:16px !important;border-radius:12px}
  /* ATAR estimator: result card never floats over the footer */
  .atarbox{position:static !important}
  #calc{padding-bottom:52px !important}
  /* results: one swipeable row of cases instead of six stacked screens */
  .rcases.six{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px;margin-left:-20px;margin-right:-20px;padding:2px 20px 14px;scrollbar-width:none}
  .rcases.six::-webkit-scrollbar{display:none}
  .rcases.six>.rcase{flex:0 0 86%;scroll-snap-align:center;height:auto}
  /* free resources: swipeable cards */
  .resgrid{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px;margin-left:-20px;margin-right:-20px;padding:2px 20px 14px;scrollbar-width:none}
  .resgrid::-webkit-scrollbar{display:none}
  .resgrid>.card{flex:0 0 84%;scroll-snap-align:center}
  .m99hint{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
  .m99dots{display:flex;gap:6px}
  .m99dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.3;transition:opacity .2s,width .2s}
  .m99dots i.on{opacity:1;width:16px;border-radius:3px}
  /* shop: two titles per row so the catalogue scans quickly */
  .sg4{grid-template-columns:1fr 1fr !important;gap:12px}
  .sg4 .prod{padding:12px}
  .sg4 .prod .nm2{font-size:.9rem;margin-top:10px}
  .sg4 .prod .btn,.sg4 .prod button{width:100%;padding:11px 8px;font-size:.8rem}
  .sg4 .prod .stat{font-size:.72rem}
  .trustrow{justify-content:flex-start;gap:8px}
  .trust{font-size:.68rem;padding:7px 12px}
  .freeband{flex-direction:column;align-items:stretch;gap:14px}
  .freeband .btn,.freeband .pill,.freeband a{text-align:center}
  /* family portal */
  .phead h2{font-size:2rem;line-height:1.15}
  .phead h2 .dim{display:block;margin-top:6px;font-size:.98rem !important;line-height:1.45}
  .ptab .pth:nth-child(5){display:none}
  .ptab{grid-template-columns:1.6fr .55fr .6fr .6fr}
  .ptc{font-size:.84rem}
  .crow .cx{width:40px;height:40px;font-size:1.15rem}
  /* dropdowns: open fully, respond to the first tap */
  button,summary,[role=button],.ost,a{touch-action:manipulation;-webkit-tap-highlight-color:rgba(14,90,138,.12)}
  .fq .a{transition:max-height .35s ease}
  .fq.open .a{max-height:none !important}
  .fq button{min-height:48px;padding-top:16px;padding-bottom:16px}
  .rcase summary{display:block;padding:10px 0;margin:-4px 0}
  .rcase summary::-webkit-details-marker{display:none}
  .term .tnote>*{position:sticky;left:16px;max-width:calc(100vw - 72px);box-sizing:border-box}
  /* floating contact button: only the visible button catches taps */
  #fab,#fab.on{pointer-events:none !important}
  #fab.on>.btn.openM{pointer-events:auto}
  #fab .fab2{display:none}
  /* free guide offer: compact sheet at the bottom of the home page, never over the content */
  #cap{left:12px !important;right:12px !important;bottom:12px !important;width:auto !important;padding:16px 18px 18px !important;z-index:90;box-shadow:0 -6px 30px rgba(18,41,74,.18)}
  #cap h3{font-size:1.02rem !important;margin-top:8px !important;padding-right:34px}
  #cap #capForm>p.dim{display:none}
  #capX{position:absolute;top:6px;right:6px;width:44px;height:44px;font-size:1.4rem;line-height:1}
  body.m99cap #fab{opacity:0 !important}
  /* booking form inputs */
  #bkBody input[type=text],#bkBody input:not([type]),#bkBody input[type=tel],#bkBody textarea,.formcard input[type=text],.formcard input:not([type]),.formcard textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;width:100%;margin-top:8px;outline:none}
  input,select,textarea{font-size:16px}
  /* footer: one clear column */
  footer .grid{grid-template-columns:1fr 1fr !important;gap:26px 18px;line-height:1.75}
  footer .grid>div:first-child{grid-column:1/-1}
  footer .grid>div:nth-child(2){grid-column:1/-1}
  footer .grid>div:nth-child(2) .m99navcols,footer .grid>div:nth-child(2){columns:2;column-gap:18px}
  footer .grid>div:nth-child(2) .h{column-span:all}
  footer .grid>div:nth-child(3),footer .grid>div:nth-child(4){grid-column:1/-1}
  footer a{padding:3px 0}
  footer .fine{flex-direction:column;gap:4px}
  /* long headings wrap cleanly */
  h1,h2,h3{overflow-wrap:break-word;hyphens:manual}
}
@media (max-width:380px){
  .sg4{grid-template-columns:1fr !important}
}