/* November 6: a stronger phone opening, on Shaan's "the first sections on the iphone up to the hero don't look
   strong and need work ... lets try a better version here". Off unless ?phonetop=on. Phones only (under 700 px).
   No copy changes.

   Hero: the film fills most of the first screen (3:4, the crop keeps all four shots), the headline sits low
   on the film over a deep-teal fade, and the four facts lose their boxed grid for lime ticks.

   Nutrition, following his Nov 6 note to Codex ("Keep the current opening, reveal the pack on black with 40× below it,
   and return to light for recipes"): "9 in 10" stays on white; then one black chapter, like the computer's,
   holds the box, 40× and its "See what 40× looks like", "Different greens", and the three benefits;
   the page returns to white at "One handful a day." */

@media (max-width: 699px) {
  /* ---------- Hero ---------- */
  html[data-phonetop] body #unit-hero #top#top .cf-hero-media {
    position: relative;
    height: min(133.333vw, 64svh) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  html[data-phonetop] body #unit-hero #top#top .cf-hero-media :is(.pm-film, video, picture, img) {
    height: 100% !important;
    width: 100%;
  }
  html[data-phonetop] body #unit-hero #top#top .cf-hero-media video {
    object-fit: cover;
    object-position: 60% 50%;
  }
  html[data-phonetop] body #unit-hero #top#top .cf-hero-media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 62%;
    background: linear-gradient(180deg, rgba(10, 42, 42, 0) 0%, rgba(10, 42, 42, .7) 52%, #0a2a2a 100%);
    pointer-events: none;
    z-index: 1;
  }
  html[data-phonetop] body #unit-hero #top#top .cf-hero-copy {
    position: relative;
    z-index: 2;
    margin-top: -150px !important;
  }
  /* The four facts: no boxed grid, a lime tick beside each, one hairline above.
     Nov 7: not in the cleaned version; Shaan, "keep the grid not the tick boxes". */
  html[data-phonetop]:not([data-phoneclean]) body #unit-hero #top#top .cf-hero-base {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .18) !important;
    margin-top: 28px;
  }
  html[data-phonetop]:not([data-phoneclean]) body #unit-hero #top#top .cf-hero-facts {
    row-gap: 0;
    column-gap: 16px;
    padding-block: 10px;
  }
  html[data-phonetop]:not([data-phoneclean]) body #unit-hero #top#top .cf-hero-facts li {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 10px;
    min-height: 0 !important;
    padding: 10px 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
    text-align: left !important;
  }
  html[data-phonetop]:not([data-phoneclean]) body #unit-hero #top#top .cf-hero-facts li::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background: #a4cd3a;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  html[data-phonetop]:not([data-phoneclean]) body #unit-hero #top#top .cf-hero-facts li::after {
    content: none !important;
  }

  /* ---------- Nutrition: one black chapter ---------- */
  /* Room under "Closing that gap shouldn't be another job." before the black begins. */
  html[data-phonetop="on"] body #unit-nutrition #why#why #nutrition-opening .nm-gap {
    padding-bottom: 56px !important;
  }
  html[data-phonetop="on"] body #unit-nutrition #why#why #nutrition-product#nutrition-product {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 56px 20px 48px !important;
    background: #000;
    color: #fff;
  }
  /* Pack first, 40× below it, its "See what 40× looks like", then the six greens. */
  html[data-phonetop="on"] body #unit-nutrition #why#why #nutrition-product .nm-boxwrap {
    order: 1;
    width: min(100%, 320px) !important;
    margin: 0 auto !important;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 100%);
  }
  html[data-phonetop="on"] body #unit-nutrition #why#why #nutrition-product .nm-boxwrap::after {
    content: none !important;
  }
  html[data-phonetop="on"] body #unit-nutrition #why#why #nutrition-product .nm-claim {
    order: 2;
    margin: 20px 0 0 !important;
    color: #fff;
    text-align: center;
  }
  html[data-phonetop="on"] body #unit-nutrition #why#why #nutrition-product details#mobile-weight-comparison {
    order: 3;
    margin: 24px auto 0 !important;
  }
  html[data-phonetop="on"] body #unit-nutrition #why#why #nutrition-product #nutrition-discovery {
    order: 4;
    margin: 64px 0 0 !important;
  }
  html[data-phonetop="on"] body #unit-nutrition #why#why #nutrition-product .nm-up {
    color: rgba(255, 255, 255, .76) !important;
  }
  html[data-phonetop="on"] body #unit-nutrition #why#why #nutrition-product :is(.nm-num, .nm-digits) {
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
  }
  html[data-phonetop="on"] body #unit-nutrition #why#why #nutrition-product .nm-x {
    color: #a4cd3a !important;
    background: none !important;
    -webkit-text-fill-color: #a4cd3a !important;
  }
  html[data-phonetop="on"] body #unit-nutrition #why#why #nutrition-product .nm-more {
    color: #fff !important;
  }
  html[data-phonetop="on"] body #unit-nutrition #why#why #nutrition-product :is(#forty-scope, #forty-scope a) {
    color: rgba(255, 255, 255, .76) !important;
  }
  html[data-phonetop="on"] body #unit-nutrition #why#why #nutrition-product #rainbow-title,
  html[data-phonetop="on"] body #unit-nutrition #why#why #nutrition-product #rainbow-title span {
    color: #fff !important;
  }
  html[data-phonetop="on"] body #unit-nutrition #why#why #nutrition-product .cd-rainbow-line {
    color: rgba(255, 255, 255, .76) !important;
  }
  html[data-phonetop="on"][data-polish] body #unit-nutrition #why#why #nutrition-product button.nd-open {
    background: transparent !important;
    border-color: rgba(255, 255, 255, .18) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18) !important;
    color: #fff !important;
  }
  html[data-phonetop="on"] body #unit-nutrition #why#why #nutrition-product button.nd-open span {
    color: #fff !important;
  }
  html[data-phonetop="on"] body #unit-nutrition #why#why #nutrition-product i.nx-plus {
    background: transparent !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3) !important;
  }

  /* The benefits stay on black, edge to edge, joined to the chapter above. */
  html[data-phonetop="on"] body #unit-nutrition #why#why #benefits#benefits {
    margin-top: 0 !important;
    padding-top: 24px !important;
    padding-bottom: 64px !important;
    background: #000;
    color: #fff;
    box-shadow: 0 0 0 100vmax #000;
    clip-path: inset(0 -100vmax);
  }
  html[data-phonetop="on"] body #unit-nutrition #why#why #benefits :is(#benefits-title, h4, summary, summary span, strong) {
    color: #fff !important;
  }
  html[data-phonetop="on"] body #unit-nutrition #why#why #benefits article p {
    color: rgba(255, 255, 255, .76) !important;
  }
  html[data-phonetop="on"][data-polish] body #unit-nutrition #why#why #benefits i.cp-plus {
    background: transparent !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3) !important;
  }
  /* Back to white for the meals. */
  html[data-phonetop="on"] body #unit-nutrition #why#why #portion-comparison {
    padding-top: 56px !important;
  }
}

/* ---------- Mode "desk": the computer's black chapter on the phone (and, from Nov 7, iPad held upright, up to 999 px) ----------
   Same words and parts as the computer: 9 in 10, the box, 40×, "See what 40× looks like", "Six living greens.
   Built as one mix." with the six photos and the detail card, and the three benefits. The phone's own versions of
   those are hidden; the phone's meals follow on white from "One handful a day." */
@media (max-width: 999px) {
  html[data-phonetop="desk"] body #unit-nutrition #why#why > #dd {
    display: block !important;
  }
  html[data-phonetop="desk"] body #unit-nutrition #why#why > #dd > .dd-light,
  html[data-phonetop="desk"] body #unit-nutrition #why#why #nutrition-opening,
  html[data-phonetop="desk"] body #unit-nutrition #why#why #benefits {
    display: none !important;
  }
}

/* Mode "desk", laid out for the phone: the computer's order and words, phone sizes from the rule sheet. */
@media (max-width: 999px) {
  html[data-phonetop="desk"] body #why#why > #dd .dd-greens {
    display: none !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd > .dd-black {
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 64px 20px 72px !important;
    background: #000 !important;
    color: #fff;
    text-align: center;
  }
  html[data-phonetop="desk"] body #why#why > #dd .dd-reveal {
    display: block !important;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 !important;
  }
  /* 9 in 10 */
  html[data-phonetop="desk"] body #why#why > #dd #dd-title {
    max-width: 350px;
    margin: 0 auto !important;
    font-size: 34px !important;
    font-weight: 600 !important;
    line-height: 1.12 !important;
    letter-spacing: -.02em !important;
    color: #fff !important;
    text-align: center;
  }
  html[data-phonetop="desk"] body #why#why > #dd #dd-title .spotlight-stat-accent {
    color: #a4cd3a !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #dd-title .dd-ref {
    font-size: 14px !important;
    vertical-align: super;
    color: rgba(255, 255, 255, .76) !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd .restored-opening-intro {
    max-width: 340px;
    margin: 18px auto 0 !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd .restored-opening-intro p {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, .76) !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd .restored-opening-intro strong {
    color: #fff !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd .restored-opening-turn {
    margin-top: 6px !important;
    color: #fff !important;
  }
  /* The box */
  html[data-phonetop="desk"] body #why#why > #dd .dd-box {
    width: min(100%, 320px) !important;
    height: auto !important;
    margin: 28px auto 0 !important;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0));
  }
  html[data-phonetop="desk"] body #why#why > #dd .dd-box img {
    display: block;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
  /* Up to 40× more nutrition. */
  html[data-phonetop="desk"] body #why#why > #dd #nutrition-claim {
    display: block !important;
    width: 100%;
    margin: 16px 0 0 !important;
    color: #fff !important;
    text-align: center;
  }
  html[data-phonetop="desk"] body #why#why > #dd #nutrition-claim .dd-stat-row {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  html[data-phonetop="desk"] body #why#why > #dd #nutrition-claim .dd-up {
    font-size: 20px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, .76) !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #nutrition-claim .dd-num {
    font-size: 112px !important;
    font-weight: 600 !important;
    line-height: .95 !important;
    letter-spacing: -.04em !important;
    color: #fff !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #nutrition-claim .dd-more {
    display: block !important;
    margin-top: 6px;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    color: #fff !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd :is(.dd-note, .restored-opening-why) {
    max-width: 340px;
    margin: 10px auto 0 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, .76) !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd .dd-note {
    color: rgba(255, 255, 255, .88) !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd details#weight-comparison {
    width: 100% !important;
    max-width: 350px;
    margin: 28px auto 0 !important;
    text-align: left;
  }
  /* Six living greens. Built as one mix. */
  html[data-phonetop="desk"] body #why#why > #dd #six-greens {
    display: block !important;
    width: 100%;
    max-width: none;
    margin: 80px 0 0 !important;
    padding: 0 !important;
    text-align: center;
  }
  html[data-phonetop="desk"] body #why#why > #dd #assembly-mix-title {
    margin: 0 !important;
    font-size: 34px !important;
    font-weight: 600 !important;
    line-height: 1.12 !important;
    letter-spacing: -.02em !important;
    color: #fff !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #six-greens > p {
    max-width: 340px;
    margin: 14px auto 0 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, .76) !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #six-greens > ul {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 8px;
    width: 100%;
    max-width: 350px;
    margin: 32px auto 0 !important;
    padding: 0 !important;
    list-style: none;
  }
  html[data-phonetop="desk"] body #why#why > #dd #six-greens > ul > li {
    width: auto !important;
    margin: 0 !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #six-greens .nc-green {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    color: #fff !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #six-greens .nc-green img {
    width: 92px !important;
    height: 92px !important;
    margin: 0 0 6px !important;
    border-radius: 50% !important;
    object-fit: cover;
  }
  html[data-phonetop="desk"] body #why#why > #dd #six-greens .sf-green-name {
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: #fff !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #six-greens .sf-flavor {
    font-size: 13px !important;
    line-height: 1.3 !important;
    color: rgba(255, 255, 255, .76) !important;
  }
  /* The detail card for the chosen green */
  html[data-phonetop="desk"] body #why#why > #dd #nc-spotlight {
    display: block !important;
    width: 100% !important;
    max-width: 350px;
    margin: 28px auto 0 !important;
    padding: 20px !important;
    border-radius: 20px !important;
    text-align: left;
  }
  html[data-phonetop="desk"] body #why#why > #dd #nc-spotlight :is(.nc-spotlight-heading, .nc-spotlight-content) {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #nc-spotlight .nc-spotlight-heading span {
    display: block;
    font-size: 12px !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #nc-spotlight .nc-spotlight-heading strong {
    display: block;
    margin-top: 4px;
    font-size: 20px !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #nc-spotlight .nc-spotlight-content {
    margin-top: 10px !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #nc-spotlight .nc-spotlight-content p {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #nc-spotlight .nc-spotlight-research {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px !important;
  }
  /* The three benefits, stacked, left-aligned like the computer's columns */
  html[data-phonetop="desk"] body #why#why > #dd #desktop-benefits {
    display: block !important;
    width: 100% !important;
    max-width: 350px;
    margin: 48px auto 0 !important;
    text-align: left;
  }
  html[data-phonetop="desk"] body #why#why > #dd #desktop-benefits .mix-benefit-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #desktop-benefits .mix-benefit-list > article {
    width: auto !important;
    margin: 0 !important;
    padding: 20px 0 22px !important;
    border-top: 1px solid rgba(255, 255, 255, .18) !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #desktop-benefits .mix-benefit-list > article.sf-active {
    border-top-color: #a4cd3a !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #desktop-benefits .mix-benefit-list > article :is(h3, h4) {
    margin: 0 !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
    color: #fff !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #desktop-benefits .mix-benefit-list > article p {
    margin: 8px 0 0 !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, .76) !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #desktop-benefits details#bf-nutrition-explained {
    width: 100% !important;
    margin: 0 !important;
  }
  /* Back to white for the meals. */
  html[data-phonetop="desk"] body #unit-nutrition #why#why #portion-comparison {
    padding-top: 56px !important;
  }
}

/* Mode "desk": the finishing parts the computer's own CSS draws. */
@media (max-width: 999px) {
  html[data-phonetop="desk"] body #why#why > #dd #six-greens .nc-green img {
    border: 1px solid rgba(255, 255, 255, .18) !important;
    background: rgba(255, 255, 255, .03);
  }
  html[data-phonetop="desk"] body #why#why > #dd #six-greens .nc-green[aria-pressed="true"] img {
    border-color: #a4cd3a !important;
    box-shadow: 0 0 0 1px #a4cd3a;
  }
  html[data-phonetop="desk"] body #why#why > #dd #nc-spotlight {
    background: rgba(255, 255, 255, .043) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    color: #fff !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #nc-spotlight .nc-spotlight-heading span,
  html[data-phonetop="desk"] body #why#why > #dd #nc-spotlight #nc-study-label {
    font-size: 12px !important;
    color: rgba(255, 255, 255, .76) !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #nc-spotlight .nc-spotlight-content p {
    color: rgba(255, 255, 255, .76) !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #nc-spotlight .nc-spotlight-tags {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
  }
  html[data-phonetop="desk"] body #why#why > #dd #nc-spotlight .nc-spotlight-tags li {
    margin: 0 !important;
    padding: 3px 10px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #fff !important;
  }
  html[data-phonetop="desk"] body #why#why > #dd #bf-nutrition-explained > summary {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .18);
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    font-size: 16px !important;
    color: #fff !important;
    list-style: none;
    cursor: pointer;
  }
  html[data-phonetop="desk"] body #why#why > #dd #bf-nutrition-explained > summary::-webkit-details-marker {
    display: none;
  }
  html[data-phonetop="desk"] body #why#why > #dd #bf-nutrition-explained i.mix-plus {
    flex: none;
    display: block !important;
    width: 18px;
    height: 18px;
    background:
      linear-gradient(#fff, #fff) center / 14px 1.5px no-repeat,
      linear-gradient(#fff, #fff) center / 1.5px 14px no-repeat !important;
    transition: transform .2s ease;
  }
  html[data-phonetop="desk"] body #why#why > #dd #bf-nutrition-explained[open] i.mix-plus {
    transform: rotate(45deg);
  }
}

/* Nov 6: the spotlight's screen-reader text showed as a visible line under the card after a tap on phones. Keep it hidden. */
html[data-phonetop="desk"] #why .nc-sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}