@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:10px;border-radius:22px}
  .heroFrame{padding:26px 20px 24px;border-radius:16px}
  .wordmarkGold{font-size:24px}
  .wordmarkSub{font-size:21px}
  .heroSub{font-size:13px}
  .heroIconTile{width:60px;height:60px;margin-bottom:18px}
  .heroLeafIcon{width:30px;height:30px}
  .heroEyebrow{font-size:10.5px;letter-spacing:.12em}
  /* Shrink the flag toggle (not the eyebrow/BETA text) so all three
     heroTopRow items keep fitting on one line at phone widths — see the
     heroLangToggle placement note in base.css. */
  .heroLangToggle{gap:5px}
  .langBtn{padding:4px 6px;border-radius:8px}
  .langBtn svg{width:16px;height: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;gap:4px}
  .modal{padding:18px}
  .categoryGrid{grid-template-columns:1fr}
  .categoryOption{padding:10px}
  .macroLegend{grid-template-columns:1fr}
  /* Full disclaimer becomes a near-full-screen sheet on mobile per spec —
     the legal text is long enough that a small centered modal would be
     mostly scrollbar. Safe-area padding keeps the close button reachable
     above home-indicator/notch areas on notched devices. */
  .overlay:has(.disclaimerModal){padding:0;align-items:flex-end}
  .disclaimerModal{max-width:100%;width:100%;max-height:94vh;border-radius:18px 18px 0 0;padding:18px 16px calc(16px + env(safe-area-inset-bottom))}
  .disclaimerModalBody{max-height:none}
  /* Shrinking the stepper alone (previous attempt) still isn't robust: it
     just moves the pixel budget's break-even point rather than removing
     it, so a phone at a narrower effective CSS width than tested (a
     Samsung's default "Screen zoom" display setting reports a smaller
     viewport than its raw resolution suggests -- confirmed on a Galaxy
     S23 Ultra) can still make the auto-sized stepper+total+remove columns
     alone exceed the container, leaving nothing for the name/GI column
     and reproducing the exact same overlap. Fixing this for "most leading
     viewport sizes" for real means not depending on a pixel budget at
     all: below 600px, each ingredient becomes its own 2-line block --
     name+GI badge always gets the *entire* row width on line 1
     (flex:1 1 100% forces the wrap), and the stepper+total+remove group
     flows onto line 2 below it, every time, regardless of name length or
     exact viewport width. Still shrink the stepper itself (keeps line 2
     comfortably short too), but the layout no longer depends on getting
     that shrink "enough" for any particular device. */
  .qty{width:34px!important;font-size:12px}
  .qtyStep{width:20px;height:26px;font-size:12px}
  .qtyUnit{font-size:9.5px;min-width:13px}
  .recipeIngredients{display:flex;flex-direction:column;gap:10px}
  .recipeIngredient{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:8px;row-gap:5px;font-size:10.5px;padding-bottom:5px;border-bottom:1px solid var(--line)}
  .recipeIngredient:last-child{border-bottom:none;padding-bottom:0}
  .recipeIngredientName{flex:1 1 100%}
  .recipeIngredient .mini{width:18px;height:18px;font-size:11px}
}