
/* =========================================================================
   FOOD LENS — "What should we aim for?"
   It was a 15-line wall of bold-prefixed sentences in one narrow column, all the
   same size, with nothing to scan. She asked for it to be far easier and more
   inviting to read.
   The content IS a set of scales, so it is now shown as scales: four cards, each
   metric a short ladder where the range sits in a tinted pill that DEEPENS as it
   improves. You can see at a glance where "good" is without reading a word.
   ========================================================================= */
#page-food-lens .guidance-section{
  background:#FBF8F2;
  border:1px solid #EFEAE0;
  border-radius:22px;
  padding:24px 22px 20px;
  margin-top:22px;
}
#page-food-lens .guidance-section > h3{
  margin:0 0 4px !important;
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:1.35rem !important; font-weight:700 !important;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
/* a line of orientation before the detail — the old block launched straight in */
#page-food-lens .guidance-section > h3::after{
  content:"A rough guide, not a target. More colour and more plants is the whole idea.";
  display:block; margin-top:6px;
  font-family:'Nunito',system-ui,sans-serif;
  font-size:.88rem; font-weight:400; line-height:1.6;
  color:#5A6472; -webkit-text-fill-color:#5A6472;
}
#page-food-lens .guidance-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:16px !important;
  margin-top:18px;
}
#page-food-lens .guidance-grid > div{
  background:#fff;
  border:1px solid #EFEAE0;
  border-radius:18px;
  padding:16px 18px 14px;
  box-shadow:0 2px 8px rgba(36,52,71,.05);
}
#page-food-lens .guidance-grid > div > h4{
  margin:0 0 12px !important;
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:1.02rem !important; font-weight:700 !important;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
  display:flex; align-items:center; gap:8px;
}
/* each range on its own line: the value as a pill, the meaning beside it */
#page-food-lens .guidance-grid > div > p{
  display:grid !important;
  grid-template-columns:auto 1fr;
  align-items:baseline;
  gap:10px;
  margin:0 0 8px !important;
  padding:0 !important;
  font-family:'Nunito',system-ui,sans-serif !important;
  font-size:.86rem !important;
  line-height:1.55 !important;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important;
}
#page-food-lens .guidance-grid > div > p:last-child{ margin-bottom:2px !important; }
#page-food-lens .guidance-grid > div > p > strong{
  display:inline-block;
  min-width:84px; text-align:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:.74rem; font-weight:800; letter-spacing:.02em;
  white-space:nowrap;
}
/* the ladder: palest at the bottom of the scale, deepest at the top, so the
   direction of travel is visible before any of it is read */
#page-food-lens .guidance-grid > div > p:nth-of-type(1) > strong{
  /* 4.25 was just under AA for this small bold text — one step deeper */
  background:#F3F1EA; color:#5C6570 !important; -webkit-text-fill-color:#5C6570 !important;
}
#page-food-lens .guidance-grid > div > p:nth-of-type(2) > strong{
  background:#EAF1E5; color:#55703F !important; -webkit-text-fill-color:#55703F !important;
}
#page-food-lens .guidance-grid > div > p:nth-of-type(3) > strong{
  background:#DCEBD3; color:#456035 !important; -webkit-text-fill-color:#456035 !important;
}
#page-food-lens .guidance-grid > div > p:nth-of-type(4) > strong{
  background:#CBE3BE; color:#37502A !important; -webkit-text-fill-color:#37502A !important;
}
@media (max-width:820px){
  #page-food-lens .guidance-grid{ grid-template-columns:minmax(0,1fr) !important; }
}
@media (max-width:520px){
  #page-food-lens .guidance-section{ padding:18px 14px 14px; }
  #page-food-lens .guidance-grid > div > p{ grid-template-columns:1fr; gap:2px; }
  #page-food-lens .guidance-grid > div > p > strong{ justify-self:start; min-width:0; }
}
