/* November 6 trials, on Shaan's "show me the fix and then how to make the other sections flow and pop more".
   Off unless the page is opened with ?farm=tight and/or ?rhythm=a|b (flow-pop-nov6.js sets the switches).
   farm=tight  Farm (computers): headline and its line read as one pair, less empty space above, room before the film.
   rhythm=a    Dark Promise: the guarantee becomes one deep-green beat right after Plans; FAQ goes white.
   rhythm=b    Dark comparison: "Why not store greens or a powder?" becomes the deep-green beat before Plans,
               with Nutrition Mix as a white column; Promise and FAQ stay one pale "after you order" chapter.
   Deep green is Freshness's own #0a2a2a, so no new colour enters the page. */

:root { --fp-deep: #0a2a2a; --fp-ink: #144444; --fp-lime: #a4cd3a; }

/* ---------- Farm (computers only; the phone Farm already reads well) ---------- */
@media (min-width: 1000px) {
  html[data-farm="tight"] body #unit-farm#unit-farm #farm#farm {
    padding-top: 88px;
  }
  html[data-farm="tight"] body #unit-farm#unit-farm #farm#farm .farm-title {
    margin-bottom: 0;
  }
  html[data-farm="tight"] body #unit-farm#unit-farm #farm#farm .nf-farm-note {
    margin: 16px 0 0;
    max-width: none;
    font-size: 21px;
    line-height: 1.4;
    color: #56635f;
  }
  html[data-farm="tight"] body #unit-farm#unit-farm #farm#farm .film {
    margin-top: 36px;
  }
}

/* ---------- A: dark Promise ---------- */
html[data-rhythm="a"] body #unit-faq#unit-faq {
  background: #fff;
}
html[data-rhythm="a"] body #unit-faq#unit-faq #promise#promise {
  background: var(--fp-deep);
  padding-top: 120px;
  padding-bottom: 112px;
}
html[data-rhythm="a"] body #unit-faq#unit-faq #promise#promise .pr-kicker {
  color: rgba(255, 255, 255, .76);
}
html[data-rhythm="a"] body #unit-faq#unit-faq #promise#promise h2 {
  color: #fff;
}
html[data-rhythm="a"] body #unit-faq#unit-faq #promise#promise h2 > span {
  color: rgba(255, 255, 255, .76);
}
html[data-rhythm="a"] body #unit-faq#unit-faq #promise#promise h2 .oh-dot {
  color: var(--fp-lime);
}
html[data-rhythm="a"] body #unit-faq#unit-faq #promise#promise .pr-body {
  color: rgba(255, 255, 255, .76);
}
html[data-rhythm="a"] body #unit-faq#unit-faq #promise#promise .pr-policy {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, .5);
}
html[data-rhythm="a"] body #unit-faq#unit-faq #promise#promise .pr-seal circle {
  stroke: transparent;
}
html[data-rhythm="a"] body #unit-faq#unit-faq #faq#faq {
  background: #fff;
  padding-top: 104px;
}
@media (max-width: 999px) {
  html[data-rhythm="a"] body #unit-faq#unit-faq #promise#promise { padding-top: 72px; padding-bottom: 72px; }
  html[data-rhythm="a"] body #unit-faq#unit-faq #faq#faq { padding-top: 72px; }
}
@media (max-width: 699px) {
  html[data-rhythm="a"] body #unit-faq#unit-faq #promise#promise { padding-top: 56px; padding-bottom: 56px; }
  html[data-rhythm="a"] body #unit-faq#unit-faq #faq#faq { padding-top: 56px; }
}

/* ---------- B: dark comparison ---------- */
html[data-rhythm="b"] body #unit-comparison#unit-comparison,
html[data-rhythm="b"] body #unit-comparison#unit-comparison #comparison#comparison {
  background: var(--fp-deep);
  color: #fff;
}
html[data-rhythm="b"] body #unit-comparison#unit-comparison #comparison#comparison {
  padding-top: 104px;
  padding-bottom: 96px;
}
html[data-rhythm="b"] body #unit-comparison#unit-comparison #comparison#comparison .ec-heading {
  color: #fff;
}
html[data-rhythm="b"] body #unit-comparison#unit-comparison #comparison#comparison .ec-lead,
html[data-rhythm="b"] body #unit-comparison#unit-comparison #comparison#comparison .ec-note {
  color: rgba(255, 255, 255, .66);
}
html[data-rhythm="b"] body #unit-comparison#unit-comparison #comparison#comparison :is(th, td) {
  border-color: rgba(255, 255, 255, .14);
}
html[data-rhythm="b"] body #unit-comparison#unit-comparison #comparison#comparison tbody th {
  color: #fff;
}
html[data-rhythm="b"] body #unit-comparison#unit-comparison #comparison#comparison :is(.ec-grocery, .ec-supplements) {
  color: rgba(255, 255, 255, .7);
}
html[data-rhythm="b"] body #unit-comparison#unit-comparison #comparison#comparison :is(th, td).ec-mix {
  background: #fff;
  color: var(--fp-ink);
}
html[data-rhythm="b"] body #unit-comparison#unit-comparison #comparison#comparison :is(th, td).ec-mix :is(span, .sf-mark) {
  color: var(--fp-ink);
}
html[data-rhythm="b"] body #unit-comparison#unit-comparison #comparison#comparison .ec-expand {
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
}
html[data-rhythm="b"] body #unit-comparison#unit-comparison #comparison#comparison .ec-expand :is(svg, span) {
  color: #fff;
}
html[data-rhythm="b"] body #unit-comparison#unit-comparison #comparison#comparison :is(#comparison-details, .ec-details) {
  color: rgba(255, 255, 255, .82);
}
html[data-rhythm="b"] body #unit-comparison#unit-comparison #comparison#comparison :is(#comparison-details, .ec-details) :is(h3, h4, strong, th) {
  color: #fff;
}
html[data-rhythm="b"] body #unit-comparison#unit-comparison #comparison#comparison :is(#comparison-details, .ec-details) a {
  color: #fff;
}
html[data-rhythm="b"] body #unit-plans#unit-plans #plans#plans {
  padding-top: 88px;
}
@media (max-width: 999px) {
  html[data-rhythm="b"] body #unit-comparison#unit-comparison #comparison#comparison {
    padding-top: 72px;
    padding-bottom: 64px;
  }
  html[data-rhythm="b"] body #unit-plans#unit-plans #plans#plans {
    padding-top: 64px;
  }
}

/* B: "Varies" keeps its own grey by default; lift it so it reads on deep green. */
html[data-rhythm="b"] body #unit-comparison#unit-comparison #comparison#comparison .ec-varies {
  color: rgba(255, 255, 255, .62);
}
html[data-rhythm="b"] body #unit-comparison#unit-comparison #comparison#comparison .ec-details .ec-detail p {
  color: rgba(255, 255, 255, .8);
}
html[data-rhythm="b"] body #unit-comparison#unit-comparison #comparison#comparison .ec-details .ec-detail p.ec-alternative {
  color: rgba(255, 255, 255, .6);
}
html[data-rhythm="b"] body #unit-comparison#unit-comparison #comparison#comparison .ec-details {
  border-color: rgba(255, 255, 255, .2);
}
/* Keep the white column seamless when the page is scaled (review frame, zoom). */
html[data-rhythm="b"] body #unit-comparison#unit-comparison #comparison#comparison :is(th, td).ec-mix {
  border-color: #fff;
  outline: 1px solid #fff;
}