/* Nov 7: the cleaned-up phone top (?phonetop=clean). It is the computer version on the phone (phone-top-nov6 "desk"),
   with less on screen. Shaan: "from underneath the header to the recipe slider - needs to be reworked thats what needs
   to be cleaned up" and "i think the desktop version is the latest with the better copy". Phones only. No copy changes. */
@media (max-width: 999px) {
  /* Kitchens: one calm row of logos instead of a tall white block. */
  html[data-phoneclean] #partners#partners#partners { padding: 26px 0 24px !important; }
  html[data-phoneclean] #partners#partners#partners #band-title { margin: 0 0 16px !important; text-align: center !important; }
  html[data-phoneclean] #partners#partners#partners .venue-logos { display: flex !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; grid-template-columns: none !important; margin: 0 !important; padding: 0 !important; }
  html[data-phoneclean] #partners#partners#partners .venue-logos li { flex: 1 1 0 !important; min-width: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; margin: 0 !important; padding: 0 !important; height: 34px !important; }
  html[data-phoneclean] #partners#partners#partners .venue-logos img { width: 100% !important; max-width: 64px !important; height: auto !important; max-height: 30px !important; object-fit: contain !important; }

  /* Meals: the computer's heading, then straight into the recipe slider.
     The 2x2 tiles and "Crisp, nutty and a little peppery." are not on the computer; the slider's own
     Breakfast / Smoothies / Salads filters already do what the tiles did. */
  html[data-phoneclean] #portion-comparison#portion-comparison { padding-top: 44px !important; }
  html[data-phoneclean] #portion-comparison#portion-comparison #daily-title { font-size: 32px !important; line-height: 1.08 !important; letter-spacing: -.02em !important; margin: 0 !important; text-align: center !important; }
  html[data-phoneclean] #dk-meals#dk-meals { margin: 10px auto 22px !important; padding: 0 20px !important; text-align: center !important; }
  html[data-phoneclean] #dk-meals#dk-meals h2 { display: block !important; }
  html[data-phoneclean] #dk-meals#dk-meals h2, html[data-phoneclean] #dk-meals#dk-meals .meal-heading-line { display: inline !important; font-size: 18px !important; line-height: 1.45 !important; font-weight: 400 !important; letter-spacing: 0 !important; margin: 0 !important; color: #4a5d5a !important; }
  html[data-phoneclean] #dk-meals#dk-meals .meal-instruction { display: block !important; font-size: 18px !important; line-height: 1.45 !important; font-weight: 600 !important; letter-spacing: 0 !important; margin: 2px 0 0 !important; color: #144444 !important; }
  html[data-phoneclean] #dk-meals#dk-meals .meal-polish-intro { display: none !important; }
  html[data-phoneclean] .nm .dk-meals.meal-polish-grid { display: none !important; }
}

/* Nov 7: the hand going in (handful-hand-nov7.js), under the One handful heading on the cleaned phone top. */
@media (max-width: 999px) {
  html[data-phoneclean] .hh7 { margin: 0 20px 28px !important; padding: 0 !important; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 72vh; background: #e9efed; }
  html[data-phoneclean] .hh7 video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
}

/* The benefit tabs are for phones; iPad shows the three benefits side by side, as on the computer (tablet-nov7.css). */
@media (max-width: 699px) {
  /* Benefits: the computer's three tabs, one explanation at a time. */
  html[data-phoneclean] #desktop-benefits#desktop-benefits#desktop-benefits#desktop-benefits .mix-benefit-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-columns: minmax(0, 1fr) !important; column-gap: 8px !important; row-gap: 18px !important; align-items: stretch !important; }
  html[data-phoneclean] #desktop-benefits#desktop-benefits#desktop-benefits#desktop-benefits .mix-benefit-list > article { display: contents !important; }
  html[data-phoneclean] #desktop-benefits#desktop-benefits#desktop-benefits#desktop-benefits .mix-benefit-list > article > h4 { grid-row: 1 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
  html[data-phoneclean] #desktop-benefits#desktop-benefits#desktop-benefits#desktop-benefits .mix-benefit-list > article > p { grid-row: 2 !important; grid-column: 1 / span 3 !important; display: none !important; margin: 0 !important; min-height: 96px; font-size: 16px !important; line-height: 1.5 !important; }
  html[data-phoneclean] #desktop-benefits#desktop-benefits#desktop-benefits#desktop-benefits .mix-benefit-list > article.sf-active > p { display: block !important; }
  html[data-phoneclean] #desktop-benefits#desktop-benefits#desktop-benefits#desktop-benefits .sf-benefit { width: 100% !important; height: 100% !important; min-height: 50px !important; margin: 0 !important; padding: 8px 6px !important; border-radius: 16px !important; border: 1px solid rgba(255, 255, 255, .24) !important; background: transparent !important; color: rgba(255, 255, 255, .86) !important; font-size: 13px !important; line-height: 1.2 !important; font-weight: 600 !important; letter-spacing: 0 !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important; }
  html[data-phoneclean] #desktop-benefits#desktop-benefits#desktop-benefits#desktop-benefits article.sf-active .sf-benefit { background: #a4cd3a !important; border-color: #a4cd3a !important; color: #0a2a2a !important; }
  /* A tab label reads cleaner without the closing dot; the dot stays everywhere else. */
  html[data-phoneclean] #desktop-benefits#desktop-benefits#desktop-benefits#desktop-benefits .sf-benefit .mix-dot { display: none !important; }

}