/* November 6 polish pass, on Shaan's "i don't love the gray on the rest of the page ... deep dive and polish this shit".
   On by default; ?polish=off shows the page before this pass. Computers first; phone and tablet added on his "Yes, do the phone" (block at the end).
   Freshness (signed off) and Nutrition's black chapter (his own style) are not touched.

   1. No grey grounds: Meals, Members and the comparison wrapper go white. Cards that sat on grey become
      white with the page's one hairline (#DEE5E5), so every card on the page is the same style.
   2. One button: every lime button is 54 tall, at least 214 wide, 13 bold capitals, pill-shaped like the phone's buttons
      (Nov 6, with the phone pass: the phone, Plans, FAQ and Meals were pills; only Hero and Close were 20, so they follow).
   3. One corner: 20 on every photo, film and card (Meals tiles were 24, the Farm film and Plans photo 28, the table column 18).
   4. One headline size: "Your greens for the week." drops from 64 to 52 at weight 500, like every other section.
   5. The logo row sits on the same 1200 column as everything else (it started 30 px left of it).
   6. The thin line under the header only shows over the hero film, not under the solid bar when scrolling.
   7. FAQ: the button and "Ask your farmers" move under the headline, so the questions read as one list. */

@media (min-width: 1000px) {
  /* ---------- 1. No grey grounds ---------- */
  html[data-polish="on"] body #unit-nutrition #why#why,
  html[data-polish="on"] body #unit-nutrition #why#why .dd2-recipes,
  html[data-polish="on"] body #unit-nutrition #daily-use#daily-use,
  html[data-polish="on"] body #unit-members#unit-members,
  html[data-polish="on"] body #unit-members#unit-members #members#members,
  html[data-polish="on"] body #unit-members#unit-members #love-testimonials,
  html[data-polish="on"] body section.gp-comparison-wrap {
    background: #fff !important;
  }

  /* Meals: the white frame behind the photos only showed as stray white gaps on grey. */
  html[data-polish="on"] body #daily-use#daily-use .ec-composition,
  html[data-polish="on"] body #daily-use#daily-use .ec-base {
    background: transparent !important;
  }
  /* Without the frame, the button row lines up with the page's left and right edges. */
  html[data-polish="on"] body #daily-use#daily-use .ec-base {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Cards that sat on grey: white, one hairline, corners 20. */
  html[data-polish="on"] body #unit-plans#unit-plans #plans#plans #product-stage,
  html[data-polish="on"] body #unit-plans#unit-plans #plans#plans figure.proof-plan,
  html[data-polish="on"] body #unit-plans#unit-plans #plans#plans .plan-perks-visible,
  html[data-polish="on"] body #unit-plans#unit-plans #plans#plans .counter,
  html[data-polish="on"] body #unit-faq#unit-faq #faq#faq figure.fq-quote {
    background: #fff !important;
    border: 1px solid #dee5e5 !important;
    border-radius: 20px;
  }
  html[data-polish="on"] body #unit-plans#unit-plans #plans#plans .audience {
    background: #fff !important;
    box-shadow: inset 0 0 0 1px #dee5e5 !important;
  }
  /* The box cut-outs are transparent, so their little grey tiles can go. */
  html[data-polish="on"] body #unit-plans#unit-plans #plans#plans .option-photo {
    background: transparent !important;
  }
  /* The chosen plan in "Compare all three plans": a hint of lime instead of grey. */
  html[data-polish="on"] body #unit-plans#unit-plans #plans#plans :is(th, td).is-selected-plan {
    background: rgba(164, 205, 58, .12) !important;
  }

  /* ---------- 2. One button ---------- */
  html[data-polish="on"] body #daily-use#daily-use a.em-button,
  html[data-polish="on"] body #unit-faq#unit-faq #faq#faq a.fq-cta,
  html[data-polish="on"] body #unit-plans#unit-plans #plans#plans .purchase .continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    min-height: 54px;
    min-width: 214px;
    padding: 0 30px;
    border-radius: 980px;
    font-size: 13px;
    font-weight: 700;
    line-height: 13px;
    letter-spacing: .325px;
    text-transform: uppercase;
  }

  /* Hero, Close and the header button take the same pill shape as the phone's buttons. */
  html[data-polish="on"] body #unit-hero a.cf-button,
  html[data-polish="on"] body a.btn.btn-lime.close-btn,
  html[data-polish="on"] body #nav a.cf-nav-order {
    border-radius: 980px;
  }

  /* ---------- 3. One corner ---------- */
  html[data-polish="on"] body #daily-use#daily-use .em-tile,
  html[data-polish="on"] body #unit-farm#unit-farm #farm#farm .film,
  html[data-polish="on"] body #unit-plans#unit-plans #plans#plans #product-stage {
    border-radius: 20px;
  }
  html[data-polish="on"] body #unit-comparison#unit-comparison #comparison#comparison .ec-table thead .ec-mix {
    border-radius: 20px 20px 0 0;
  }
  html[data-polish="on"] body #unit-comparison#unit-comparison #comparison#comparison .ec-table tbody tr:last-child .ec-mix {
    border-radius: 0 0 20px 20px;
  }

  /* ---------- 4. One headline size ---------- */
  html[data-polish="on"] body #unit-plans#unit-plans #plans#plans #plans-title {
    font-size: 52px;
    font-weight: 500;
    line-height: 56.16px;
    letter-spacing: -2.08px;
  }

  /* ---------- 5. Logo row on the column ---------- */
  html[data-polish="on"] body #unit-partners #partners#partners .wrap {
    width: min(1200px, calc(100% - 96px));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
  }

  /* ---------- 6. Header line only over the hero ---------- */
  html[data-polish="on"][data-nav-scrolled] body #nav.cf-nav::after {
    opacity: 0;
  }

  /* The table's small print stays inside the first column instead of running under Nutrition Mix. */
  html[data-polish="on"] body #unit-comparison#unit-comparison #comparison#comparison .ec-note {
    max-width: calc(31% - 24px);
  }

  /* ---------- 7. FAQ: action under the headline ---------- */
  html[data-polish="on"] body #unit-faq#unit-faq #faq#faq .fq-intro .fq-next {
    margin-top: 40px;
  }
  html[data-polish="on"] body #unit-faq#unit-faq #faq#faq .fq-intro .fq-help {
    margin-top: 20px;
  }
  /* With the button gone from between them, "More questions" joins the list (one line, no gap). */
  html[data-polish="on"] body #unit-faq#unit-faq #faq#faq .fq-questions > details#more-questions {
    margin-top: 0;
    border-top: 0;
  }
}

/* ---------- Alternative: Apple's grey instead of white (?polish=apple) ----------
   Shaan asked "does apple use the grey?" Apple's product pages use one very light neutral grey, #F5F5F7
   (checked on apple.com/airpods-pro, Nov 6), for alternating sections and product tiles, with white cards on it.
   Ours was mist #F1F5F2: darker and tinted green. Same polish as above, but the old grey areas take Apple's grey. */
@media (min-width: 1000px) {
  html[data-polish="on"][data-ground="apple"] body #unit-nutrition #why#why .dd2-recipes,
  html[data-polish="on"][data-ground="apple"] body #unit-nutrition #daily-use#daily-use,
  html[data-polish="on"][data-ground="apple"] body #unit-members#unit-members,
  html[data-polish="on"][data-ground="apple"] body #unit-members#unit-members #members#members,
  html[data-polish="on"][data-ground="apple"] body #unit-members#unit-members #love-testimonials {
    background: #f5f5f7 !important;
  }
  /* White cards sit on Apple's grey without a line, the way Apple draws them. */
  html[data-polish="on"][data-ground="apple"] body #unit-members#unit-members #members#members :is(.sr-clip, .sr-photo, .sr-lead) {
    border-color: transparent !important;
  }
  /* Plans: product photo and the two info cards become Apple-grey tiles, no line. */
  html[data-polish="on"][data-ground="apple"] body #unit-plans#unit-plans #plans#plans #product-stage,
  html[data-polish="on"][data-ground="apple"] body #unit-plans#unit-plans #plans#plans figure.proof-plan,
  html[data-polish="on"][data-ground="apple"] body #unit-plans#unit-plans #plans#plans .plan-perks-visible,
  html[data-polish="on"][data-ground="apple"] body #unit-plans#unit-plans #plans#plans .counter {
    background: #f5f5f7 !important;
    border-color: transparent !important;
  }
  html[data-polish="on"][data-ground="apple"] body #unit-plans#unit-plans #plans#plans .audience {
    background: #f5f5f7 !important;
    box-shadow: none !important;
  }
}

/* ---------- Separating the white run without grey (?divide=lines | labels) ----------
   Shaan: "well how do you seperate the 4 sections put together". Farm/Founder, Members, the comparison and Plans
   are all white now. Like Apple's white pages: equal space and one thin line at each change of chapter.
   Three chapters, not four: the comparison and Plans stay one "decide" chapter (no line between them).
   lines   88 px, a 1 px #DEE5E5 line on the 1200 column, 88 px: before Members and before the comparison.
   labels  the same, plus a small label above each headline, in the Members label's existing style. */
@media (min-width: 1000px) {
  html[data-polish="on"][data-divide] body #unit-farm#unit-farm #farm#farm {
    padding-bottom: 88px;
  }
  html[data-polish="on"]:is([data-divide="lines"], [data-divide="labels"]) body #unit-members#unit-members::before,
  html[data-polish="on"]:is([data-divide="lines"], [data-divide="labels"]) body #unit-comparison#unit-comparison::before {
    content: "";
    display: block;
    width: min(1200px, calc(100% - 96px));
    height: 1px;
    margin: 0 auto;
    background: #dee5e5;
  }
  html[data-polish="on"][data-divide] body .pd-label {
    text-align: left;
    margin: 0 0 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 16.8px;
    letter-spacing: 1.08px;
    text-transform: uppercase;
    color: #56635f;
  }
}

/* ---------- Apple-grey band on Members (?divide=grey) ----------
   Shaan: "what about adding the grey here - more the apple grey?". Apple alternates white and #F5F5F7 bands
   instead of drawing lines. One band only, on Members, so the run reads white (story), grey (members),
   white (compare and choose), then the dark Promise. White cards sit on it with no line, as Apple draws them. */
@media (min-width: 1000px) {
  html[data-polish="on"][data-divide="grey"] body #unit-members#unit-members,
  html[data-polish="on"][data-divide="grey"] body #unit-members#unit-members #members#members,
  html[data-polish="on"][data-divide="grey"] body #unit-members#unit-members #love-testimonials {
    background: #f5f5f7 !important;
  }
  html[data-polish="on"][data-divide="grey"] body #unit-members#unit-members #members#members :is(.sr-clip, .sr-photo, .sr-lead) {
    border-color: transparent !important;
  }
}

/* ---------- Phone and tablet (under 1000 px), on Shaan's "Yes, do the phone" (Nov 6) ----------
   Same decisions as the computer: no mist, one Apple-grey band on Members with outline-free white cards,
   cards on white get one hairline, 20 px corners, the chosen plan tinted lime. Buttons were already one pill style. */
@media (max-width: 999px) {
  html[data-polish="on"] body #unit-nutrition #why#why,
  html[data-polish="on"] body #unit-members#unit-members,
  html[data-polish="on"] body #unit-members#unit-members #members#members,
  html[data-polish="on"] body #unit-members#unit-members #love-testimonials,
  html[data-polish="on"] body section.gp-comparison-wrap {
    background: #fff !important;
  }
  html[data-polish="on"][data-divide="grey"] body #unit-members#unit-members,
  html[data-polish="on"][data-divide="grey"] body #unit-members#unit-members #members#members,
  html[data-polish="on"][data-divide="grey"] body #unit-members#unit-members #love-testimonials {
    background: #f5f5f7 !important;
  }
  html[data-polish="on"][data-divide="grey"] body #unit-members#unit-members #members#members :is(.sr-clip, .sr-photo, .sr-lead) {
    border-color: transparent !important;
  }

  /* Cards that sat on grey: white, one hairline, corners 20. */
  html[data-polish="on"] body #unit-plans#unit-plans #plans#plans #product-stage,
  html[data-polish="on"] body #unit-plans#unit-plans #plans#plans figure.proof-plan,
  html[data-polish="on"] body #unit-plans#unit-plans #plans#plans .counter,
  html[data-polish="on"] body #unit-faq#unit-faq #faq#faq figure.fq-quote,
  html[data-polish="on"] body #unit-nutrition .cp-depth-body {
    background: #fff !important;
    border: 1px solid #dee5e5 !important;
    border-radius: 20px;
  }
  html[data-polish="on"] body #unit-plans#unit-plans #plans#plans .audience {
    background: #fff !important;
    box-shadow: inset 0 0 0 1px #dee5e5 !important;
  }
  html[data-polish="on"] body #unit-plans#unit-plans #plans#plans .option-photo,
  html[data-polish="on"] body #unit-nutrition img.meal-polish-photo {
    background: transparent !important;
  }
  html[data-polish="on"] body #unit-plans#unit-plans #plans#plans :is(th, td).is-selected-plan {
    background: rgba(164, 205, 58, .12) !important;
  }
  /* Small round "open" controls in Nutrition: white with the hairline instead of grey discs. */
  html[data-polish="on"] body #unit-nutrition :is(button.nd-open, i.cp-plus) {
    background: #fff !important;
    box-shadow: inset 0 0 0 1px #dee5e5 !important;
  }
  /* Recipe cards: if a photo is missing, show deep ink behind the white title rather than grey-green. */
  html[data-polish="on"] body #unit-nutrition :is(a.gallery-card, button.gallery-card, span.gallery-photo) {
    background-color: #144444 !important;
  }
  html[data-polish="on"] body #unit-nutrition :is(a.gallery-card, button.gallery-card) {
    border-radius: 20px;
  }
  /* FAQ: "More questions" joins the list (one line, no gap); the button follows the list. */
  html[data-polish="on"] body #unit-faq#unit-faq #faq#faq .fq-questions > details#more-questions {
    margin-top: 0;
    border-top: 0;
  }
  html[data-polish="on"] body #unit-faq#unit-faq #faq#faq details#more-questions + .fq-next {
    margin-top: 28px;
  }

  /* The table's Nutrition Mix column: 20 px corners like every other card. */
  html[data-polish="on"] body #unit-comparison#unit-comparison #comparison#comparison .ec-table thead .ec-mix {
    border-radius: 20px 20px 0 0;
  }
  html[data-polish="on"] body #unit-comparison#unit-comparison #comparison#comparison .ec-table tbody tr:last-child .ec-mix {
    border-radius: 0 0 20px 20px;
  }
}

/* Small rule fix found by the rule check: the Farm line at the rule's body size on phones and tablets. */
@media (max-width: 699px) {
  html[data-polish="on"] body #unit-farm#unit-farm #farm#farm .nf-farm-note { font-size: 16px; }
}
@media (min-width: 700px) and (max-width: 999px) {
  html[data-polish="on"] body #unit-farm#unit-farm #farm#farm .nf-farm-note { font-size: 18px; }
}