@media(max-width:960px){
  .grid{grid-template-columns:1fr}
  .sidebar{position:static}
}
@media(max-width:850px){
  .summary{grid-template-columns:1fr}
  .mealhead{display:block}
  .actions{margin-top:10px}
  .macroWrap{flex-direction:column;align-items:center}
}
@media(max-width:600px){
  .wrap{padding:14px 14px 40px}
  .hero{padding:26px 20px 24px;border-radius:18px}
  .wordmark{font-size:27px}
  .wordmark span{font-size:16px}
  .heroSub{font-size:13px}
  .heroLogo{width:44px;margin-bottom:12px}
  .row{grid-template-columns:1fr}
  .sidebar{padding:20px 18px 18px}
  .planCard{padding:16px 14px 22px}
  .food{align-items:flex-start;flex-wrap:wrap}
  .foodInfo{flex:1 1 100%;width:100%}
  .itemBtns{flex:1 1 100%;width:100%;justify-content:flex-end;margin-top:8px}
  .modal{padding:18px}
  .categoryGrid{grid-template-columns:1fr}
  .categoryOption{padding:10px}
  .macroLegend{grid-template-columns:1fr}
}