/* Nov 7: iPad held upright (700–999 px) shows the computer's black chapter, arranged across the width like the computer:
   the six greens in one row, the detail card under them, the three benefits side by side, and a smaller hand clip.
   Shaan: "make iPad match the iPhone version with the black chapter" / "Or more the computer version with the black".
   Phones (under 700 px) and computers (1000 px and up) are untouched. */
@media (min-width: 700px) and (max-width: 999px) {
  /* The chapter's column: wider than a phone, narrower than the screen. */
  html[data-phoneclean] body #why#why > #dd > .dd-black { padding: 88px 40px 96px !important; }
  html[data-phoneclean] body #why#why > #dd .dd-reveal { max-width: 760px !important; margin: 0 auto !important; }
  html[data-phoneclean] body #why#why > #dd .restored-opening-intro,
  html[data-phoneclean] body #why#why > #dd .dd-reveal p { max-width: 620px; margin-left: auto !important; margin-right: auto !important; }

  /* Six greens in one row, as on the computer. */
  html[data-phoneclean] body #why#why > #dd #six-greens { max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; }
  html[data-phoneclean] body #why#why > #dd #six-greens > p { max-width: 600px !important; margin-left: auto !important; margin-right: auto !important; }
  html[data-phoneclean] body #why#why > #dd #six-greens > ul { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 12px !important; max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; }
  html[data-phoneclean] body #why#why > #dd #six-greens .nc-green img { width: 92px !important; height: 92px !important; }
  html[data-phoneclean] body #why#why > #dd #nc-spotlight { max-width: 620px !important; margin-left: auto !important; margin-right: auto !important; }

  /* The three benefits side by side, all readable at once. */
  html[data-phoneclean] body #why#why > #dd #desktop-benefits { max-width: 760px !important; margin-left: auto !important; margin-right: auto !important; }
  html[data-phoneclean] body #why#why > #dd #desktop-benefits .mix-benefit-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 28px !important; align-items: start !important; }
  html[data-phoneclean] body #why#why > #dd #desktop-benefits .mix-benefit-list > article { display: block !important; margin: 0 !important; padding: 18px 0 0 !important; border-top: 1px solid rgba(255, 255, 255, .18) !important; border-bottom: 0 !important; text-align: left !important; }
  html[data-phoneclean] body #why#why > #dd #desktop-benefits .mix-benefit-list > article :is(h3, h4, button) { text-align: left !important; justify-content: flex-start !important; margin-left: 0 !important; }
  html[data-phoneclean] body #why#why > #dd #desktop-benefits .mix-benefit-list > article p { display: block !important; font-size: 16px !important; line-height: 1.5 !important; }
  html[data-phoneclean] body #why#why > #dd #desktop-benefits details#bf-nutrition-explained { max-width: 760px; margin-left: auto !important; margin-right: auto !important; }

  /* One handful: the hand clip at a size that fits the screen. */
  html[data-phoneclean] .hh7 { max-width: 460px !important; margin: 0 auto 36px !important; }
  html[data-phoneclean] #dk-meals#dk-meals { max-width: 620px; }
}