/* =========================================================================
   FOOD LENS — "Why colour variety matters", in the same style as
   "What should we aim for?". It was the same problem: a flat stack of five
   colour entries with no card treatment, the examples and the benefit line
   running together at three near-identical sizes.
   THE SIGNATURE HERE WRITES ITSELF — each card is tinted with the colour it
   describes, so the section demonstrates its own point: five colours on the
   page, exactly as it is asking you to put five colours on a plate.
   The panel treatment also covers the other three "Why …" sections, which are
   heading + paragraph only, so the whole run reads as one family.
   ========================================================================= */
#page-food-lens .why-section{
  background:#FBF8F2;
  border:1px solid #EFEAE0;
  border-radius:22px;
  padding:24px 22px 20px;
  margin-top:18px;
}
#page-food-lens .why-section > h3{
  margin:0 0 8px !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;
}
#page-food-lens .why-section > p{
  margin:0 !important;
  font-family:'Nunito',system-ui,sans-serif !important;
  font-size:.95rem !important; line-height:1.65 !important;
  max-width:70ch;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important;
}
#page-food-lens .why-section .colour-benefits{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:14px !important;
  margin-top:18px !important;
}
/* each card wears the colour it is about */
#page-food-lens .colour-card{
  border-radius:18px !important;
  padding:16px 18px 14px !important;
  border:1px solid transparent !important;
  box-shadow:0 2px 8px rgba(36,52,71,.05);
  transition:transform .16s ease, box-shadow .16s ease;
}
#page-food-lens .colour-card:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(36,52,71,.10); }
#page-food-lens .colour-card > h4{
  margin:0 0 8px !important;
  font-family:'Playfair Display',Georgia,serif !important;
  font-size:1.02rem !important; font-weight:700 !important;
  display:flex; align-items:center; gap:8px;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#page-food-lens .colour-card > p{
  margin:0 !important;
  font-family:'Nunito',system-ui,sans-serif !important;
  font-size:.86rem !important; line-height:1.55 !important;
  color:#3F4753 !important; -webkit-text-fill-color:#3F4753 !important;
}
/* the benefit line becomes a quiet footnote, separated rather than crammed */
#page-food-lens .colour-card > small{
  display:block !important;
  margin-top:10px !important; padding-top:10px !important;
  border-top:1px solid rgba(36,52,71,.10);
  font-family:'Nunito',system-ui,sans-serif !important;
  font-size:.78rem !important; line-height:1.55 !important;
  color:#5A6472 !important; -webkit-text-fill-color:#5A6472 !important;
}
/* the five tints — soft enough for dark text, distinct enough to read as colours */
#page-food-lens .colour-card.red   { background:#FBEAE8 !important; border-color:#F2D4D0 !important; }
#page-food-lens .colour-card.orange{ background:#FCF0DF !important; border-color:#F3DFC2 !important; }
#page-food-lens .colour-card.green { background:#E9F2E4 !important; border-color:#D5E5CD !important; }
#page-food-lens .colour-card.purple{ background:#EFEAF6 !important; border-color:#DFD6EE !important; }
#page-food-lens .colour-card.white { background:#F5F3EE !important; border-color:#E4DFD4 !important; }
@media (prefers-reduced-motion:reduce){
  #page-food-lens .colour-card{ transition:none !important; }
  #page-food-lens .colour-card:hover{ transform:none !important; }
}
@media (max-width:1024px){
  #page-food-lens .why-section .colour-benefits{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:640px){
  #page-food-lens .why-section{ padding:18px 14px 14px; }
  #page-food-lens .why-section .colour-benefits{ grid-template-columns:minmax(0,1fr) !important; }
}