/* One hand: the homepage's design rules in code. Approved by Shaan on Oct 30, 2026.
   The rules in words are in docs/HOMEPAGE-RULES.md. New work uses these tokens instead of its own sizes.
   Nutrition and Freshness don't follow them yet. They take them when their new rounds go in.

   #oh#oh#oh matches nothing. It lifts each selector list above the older build's layered rules,
   so this file reads top to bottom and the later rule wins. */

body.one-hand{
  /* Colours */
  --oh-ink:#144444;
  --oh-deep:#0A2A2A;
  --oh-lime:#A4CD3A;
  --oh-muted:#56635F;
  --oh-mist:#F1F5F2;
  --oh-line:#DEE5E5;
  --oh-line-dark:rgb(255 255 255 / 18%);
  --oh-soft-dark:rgb(255 255 255 / 76%);
  --oh-track:rgb(20 68 68 / 7%);
  --oh-plus:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat;
  --oh-font:"Work Sans",sans-serif;
  /* Type and space on a phone */
  --oh-moment:clamp(30px,10.26vw,44px);
  --oh-head:clamp(29px,8.72vw,38px);
  --oh-sub:24px;
  --oh-item:20px;
  --oh-row:17px;
  --oh-body:16px;
  --oh-small:14px;
  --oh-button:13px;
  --oh-micro:12px;
  --oh-quote:16px;
  --oh-price:16px;
  --oh-table:14px;
  --oh-gutter:20px;
  --oh-space:56px;
  --oh-corner:20px;
}
@media (min-width:700px){
  body.one-hand{
    --oh-moment:60px;
    --oh-head:44px;
    --oh-sub:28px;
    --oh-row:18px;
    --oh-body:18px;
    --oh-quote:20px;
    --oh-price:20px;
    --oh-table:18px;
    --oh-gutter:48px;
    --oh-space:72px;
  }
}
@media (min-width:1000px){
  body.one-hand{
    --oh-moment:72px;
    --oh-head:52px;
    --oh-sub:32px;
    --oh-space:88px;
  }
}

/* ---------- Grounds ---------- */
body.one-hand :is(#oh#oh#oh,#unit-members){
  --bg:var(--oh-mist);
  --bg-alt:var(--oh-mist);
  --text:var(--oh-ink);
  --text-2:var(--oh-muted);
  --text-3:var(--oh-muted);
  --border:var(--oh-line);
}
body.one-hand :is(#oh#oh#oh,#unit-plans){
  --brand:var(--oh-ink);
  --deep:var(--oh-deep);
  --soft:var(--oh-mist);
  --line:var(--oh-line);
  --muted:var(--oh-muted);
}
body.one-hand :is(#oh#oh#oh,#unit-farm){--bg:#fff;padding-bottom:0}
body.one-hand :is(#oh#oh#oh,#farm)::before{display:none}
body.one-hand :is(#oh#oh#oh,#members,#unit-members .sheet-panel,#unit-members .sheet-head,#plans #product-stage,#plans .product-gallery,.comparison-door,#promise,#faq){background:var(--oh-mist)}
body.one-hand :is(#oh#oh#oh,#unit-comparison,#comparison){background:transparent}
/* A white card on mist, like the Members tiles */
body.one-hand :is(#oh#oh#oh,#promise .pr-card){background:#fff;border-color:transparent}

/* ---------- One column, one gutter, one space between sections ---------- */
body.one-hand :is(#oh#oh#oh,#farm>.wrap,#members>.wrap,#partners .wrap,#unit-plans .product-plans,#comparison .ec-wrap,#promise .pr-card,#faq .fq-grid,#close .wrap,#site-footer .wrap){
  width:calc(100% - 2 * var(--oh-gutter));
  max-width:1200px;
  margin-inline:auto;
  padding-inline:0;
}
body.one-hand :is(#oh#oh#oh,#farm,#members,#comparison){padding-block:var(--oh-space)}
body.one-hand :is(#oh#oh#oh,#partners){padding:var(--oh-space) 0}
body.one-hand :is(#oh#oh#oh,#unit-plans .product-plans){padding-block:var(--oh-space)}
body.one-hand :is(#oh#oh#oh,.comparison-door){padding:0}
body.one-hand :is(#oh#oh#oh,#promise){padding:var(--oh-space) 0 0}
body.one-hand :is(#oh#oh#oh,#faq){padding:var(--oh-space) 0}

/* ---------- Everything starts on the left ---------- */
body.one-hand :is(#oh#oh#oh,#plans .customer-quote,#plans .customer-quote *,#plans p.promise,#partners,#partners .label-sm){text-align:left}
body.one-hand :is(#oh#oh#oh,#plans .customer-quote){margin-left:0;margin-right:0;max-width:none}
body.one-hand :is(#oh#oh#oh,#plans .customer-quote .stars){justify-content:flex-start}
body.one-hand :is(#oh#oh#oh,#partners .venue-logos){justify-content:flex-start;margin-left:0;margin-right:0}

/* ---------- Type ---------- */
/* Moments: the hero and the close */
body.one-hand :is(#oh#oh#oh,#top h1,#close h2){
  font-size:var(--oh-moment);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.05em;
}
/* Section headlines */
body.one-hand :is(#oh#oh#oh,#farm .farm-title,#members .q-big,#plans .product-head h2,#comparison .ec-heading,#promise h2,#faq .fq-intro h2,#site-footer .b-title){
  font-size:var(--oh-head);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.045em;
  max-width:none;
}
/* The lime full stop ends every headline that ends in one */
body.one-hand .oh-dot{display:inline!important;color:var(--oh-lime)!important}
/* Sub-headlines */
body.one-hand :is(#oh#oh#oh,#farm .letter-intro h3,#plans .config-title,#unit-members .sheet-head h3){
  font-size:var(--oh-sub);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.03em;
}
/* Names and prices */
body.one-hand :is(#oh#oh#oh,#farm .film-caption,#farm .letter-name,#plans .option-name,#plans .option-price strong,#plans .purchase-line strong){
  font-size:var(--oh-item);
  font-weight:500;
  letter-spacing:-.02em;
}
body.one-hand :is(#oh#oh#oh,#comparison .ec-price strong){font-size:var(--oh-price)}
/* Row titles */
body.one-hand :is(#oh#oh#oh,#site-footer .b-row strong){font-size:var(--oh-row);font-weight:500;letter-spacing:-.025em}
/* Body */
body.one-hand :is(#oh#oh#oh,#top .cf-hero-lede,#farm .letter-body>p,#plans .head-note p:first-child,#plans .customer-quote blockquote,#comparison .ec-lead,#close p,#promise .pr-body,#faq .fq-answer p){
  font-size:var(--oh-body);
  line-height:1.5;
  letter-spacing:0;
  text-wrap:pretty;
}
body.one-hand :is(#oh#oh#oh,#promise .pr-policy,#faq .fq-quote blockquote){font-size:var(--oh-body)}
body.one-hand :is(#oh#oh#oh,#members .reviewer-name){font-size:var(--oh-body);font-weight:500;letter-spacing:-.01em}
/* Member quotes */
body.one-hand :is(#oh#oh#oh,#unit-members .ma2 .wall .tile .say){font-size:var(--oh-quote);font-weight:500;line-height:1.3;letter-spacing:-.02em}
body.one-hand :is(#oh#oh#oh,#unit-members .ma2 .wall .t-google q){font-size:var(--oh-body);font-weight:500;line-height:1.3;letter-spacing:-.02em}
body.one-hand :is(#oh#oh#oh,#unit-members .ma2 .wall .t-post .say,#unit-members .board .tile.media .say){font-size:var(--oh-small);font-weight:500;line-height:1.3;letter-spacing:-.01em}
body.one-hand :is(#oh#oh#oh,#unit-members .board .t-google q,#unit-members .bubble){font-size:var(--oh-small);line-height:1.38}
/* Small */
body.one-hand :is(#oh#oh#oh,#plans .config-label,#plans .recommendation,#plans .option-quantity,#plans .promise,#plans .head-note p+p,#plans .selection-description,#plans .purchase-line,#plans .purchase-line>p,#plans .support-details li,#plans .support-details details>p,#farm .letter-role,#farm .chapters .detail,#unit-members .t-text q,#unit-members .t-text q strong,#faq .fq-help,#faq .fq-search label,#faq .fq-answer p.fq-scope,#faq .fq-answer p.fq-research-links,#faq .fq-research-links a,#faq .fq-quote figcaption,#site-footer .b-email,#site-footer .ft-link,#site-footer .b-row span span){font-size:var(--oh-small);letter-spacing:0}
body.one-hand :is(#oh#oh#oh,#plans .household-intro,#plans .household-fit,#plans .household-note){font-size:var(--oh-small);line-height:1.45;text-align:left}
body.one-hand :is(#oh#oh#oh,#plans .counter strong){font-size:var(--oh-head)}
body.one-hand :is(#oh#oh#oh,#plans .config-label){font-weight:500}
body.one-hand :is(#oh#oh#oh,#bar .bar-text strong){font-size:var(--oh-small);font-weight:600}
/* The comparison table */
body.one-hand :is(#oh#oh#oh,#comparison .ec-table thead th,#comparison .ec-table thead th>span,#comparison .ec-table tbody th){font-size:var(--oh-table)}
/* Labels above a headline */
body.one-hand :is(#oh#oh#oh,#members .label,#plans .eyebrow,#promise .pr-kicker,#partners .label-sm){
  font-size:var(--oh-micro);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--oh-ink);
}
/* Nothing under 12. Draft tags stay as they are; they come off before launch. */
body.one-hand :is(#oh#oh#oh,#unit-members .kind,#unit-members .by,#unit-members .chip,#unit-members .when,#unit-members .over small,#unit-members .over .who,#unit-members .over .who span,#unit-members .chips small,#unit-members .filters small,#members .source-label,#members .reviewer-date,#members .reviewer-tenure,#members .rating,#plans figcaption,#plans .view-tabs button,#plans .option-price>span,#plans .stars,#plans .stars span,#plans .support-details table,#plans .support-details th,#plans .support-details td,#comparison .ec-price>span,#comparison .ec-note,#bar .bar-text span){font-size:var(--oh-micro)}
body.one-hand :is(#oh#oh#oh,#plans .recommendation-tag){
  font-size:var(--oh-micro);
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  padding:2px 9px;
  vertical-align:2px;
}

/* ---------- Colour of text ---------- */
/* The one grey */
body.one-hand :is(#oh#oh#oh,#farm .letter-body>p,#farm .letter-role,#unit-members .rating,#unit-members .reviewer-tenure,#unit-members .reviewer-date,#unit-members .t-text q,#unit-members .by,#unit-members .when,#unit-members .t-google .kind,#unit-members .t-text .kind,#plans .recommendation,#plans .option-quantity,#plans .option-price>span,#plans figcaption,#plans .stars span,#plans .head-note p,#plans .selection-description,#plans .purchase-line,#plans .purchase-line>p,#plans .support-details li,#plans .support-details details>p,#plans .support-details td,#plans .promise,#plans .view-tabs button,#comparison .ec-lead,#comparison .ec-note,#comparison .ec-grocery,#comparison .ec-supplements,#comparison .ec-grocery .ec-price,#comparison .ec-supplements .ec-price,#comparison .ec-grocery .ec-price strong,#comparison .ec-supplements .ec-price strong,#promise .pr-body,#promise h2>span,#faq .fq-answer,#faq .fq-answer p,#faq .fq-scope,#faq .fq-help,#faq .fq-quote figcaption,#bar .bar-text span){color:var(--oh-muted)}
/* The active thumbnail label and the price keep the ink */
body.one-hand :is(#oh#oh#oh,#plans .view-tabs button[aria-pressed=true],#plans .purchase-line strong,#faq .fq-quote blockquote,#faq .fq-research-links a){color:var(--oh-ink)}
/* White on films, one soft white on the dark grounds */
body.one-hand :is(#oh#oh#oh,#top .cf-hero-lede,#close p,#farm .chapters .detail){color:#fff}
body.one-hand :is(#oh#oh#oh,#site-footer .b-email,#site-footer .b-email a,#site-footer .b-row span span,#site-footer .b-legal,#site-footer .b-copyright,#site-footer .ft-link){color:var(--oh-soft-dark)}

/* ---------- One hairline ---------- */
body.one-hand :is(#oh#oh#oh,#farm .founder-letter,#plans .support-details,#plans .support-details details,#plans .support-details th,#plans .support-details td,#faq .fq-item,#faq .fq-more){border-color:var(--oh-line)}
body.one-hand :is(#oh#oh#oh,#site-footer .b-rows,#site-footer .b-rows li,#site-footer .b-base){border-color:var(--oh-line-dark)}

/* ---------- One button ---------- */
body.one-hand :is(#oh#oh#oh,#top .cf-button,#close .close-btn,#faq .fq-cta,#plans a.continue,#bar .btn){
  background:var(--oh-lime);
  color:var(--oh-deep);
  border:0;
  border-radius:100px;
  font-family:var(--oh-font);
  font-size:var(--oh-button);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
}
/* The secondary button is the same shape */
body.one-hand :is(#oh#oh#oh,#members .more,#site-footer .pill-light,#site-footer .pill-line){
  border-radius:100px;
  font-family:var(--oh-font);
  font-size:var(--oh-button);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
}
body.one-hand :is(#oh#oh#oh,#members .more){background:transparent;border:0;box-shadow:inset 0 0 0 1.5px var(--oh-ink);color:var(--oh-ink);justify-content:center}
body.one-hand :is(#oh#oh#oh,#members .more .more-label){font:inherit;letter-spacing:inherit;text-transform:inherit}
body.one-hand :is(#oh#oh#oh,#top .cf-button,#close .close-btn,#faq .fq-cta,#plans a.continue,#members .more,#site-footer .pill-light,#site-footer .pill-line){min-height:54px}
/* No arrows on buttons */
body.one-hand :is(#oh#oh#oh,#faq .fq-cta svg,#plans a.continue svg,#members .more svg,#members .more .icon){display:none}

/* ---------- One way to open more: + opens here and turns to ×. › takes you somewhere. ---------- */
body.one-hand :is(#oh#oh#oh,#plans .support-details summary>span,#comparison .ec-expand>svg,#faq .fq-item>summary>svg,#faq .fq-more>.fq-more-toggle>svg){display:none}
body.one-hand :is(#oh#oh#oh,#comparison .ec-expand,#plans .support-details summary,#faq .fq-item>summary,#faq .fq-more>.fq-more-toggle){
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:62px;
  padding:16px 0;
  color:var(--oh-ink);
  font-size:var(--oh-row);
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.3;
}
body.one-hand :is(#oh#oh#oh,#comparison .ec-expand,#plans .support-details summary,#faq .fq-item>summary,#faq .fq-more>.fq-more-toggle)::after{
  content:"";
  flex:none;
  width:20px;
  height:20px;
  background:var(--oh-plus);
  transition:transform .25s cubic-bezier(.16,1,.3,1);
}
body.one-hand :is(#oh#oh#oh,#comparison .ec-expand[aria-expanded=true],#plans .support-details details[open]>summary,#faq .fq-item[open]>summary,#faq .fq-more[open]>.fq-more-toggle)::after{transform:rotate(45deg)}
body.one-hand :is(#oh#oh#oh,#comparison .ec-expand){width:100%;margin-top:12px;border:0;border-bottom:1px solid var(--oh-line);background:none;text-align:left;font-family:var(--oh-font);text-decoration:none}
body.one-hand :is(#oh#oh#oh,#comparison .ec-expand-label){font:inherit;letter-spacing:inherit;color:inherit;text-decoration:none;border:0}

/* ---------- One tab: the plan chooser's pill ---------- */
body.one-hand :is(#oh#oh#oh,#plans .audience,#unit-members .ma2 .chips,#unit-members .filters,#faq .fq-filters){
  display:flex;
  gap:0;
  min-height:52px;
  padding:4px;
  border:0;
  border-radius:100px;
  background:var(--oh-track);
}
body.one-hand :is(#oh#oh#oh,#plans .audience button,#unit-members .ma2 .chips button,#unit-members .filters button,#faq .fq-filters button){
  flex:1 1 0;
  min-width:0;
  height:44px;
  min-height:44px;
  padding:0 6px;
  border:0;
  border-radius:100px;
  background:transparent;
  box-shadow:none;
  color:var(--oh-ink);
  font-family:var(--oh-font);
  font-size:var(--oh-small);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.01em;
}
body.one-hand :is(#oh#oh#oh,#plans .audience button[aria-pressed=true],#unit-members .ma2 .chips button[aria-pressed=true],#unit-members .filters button[aria-pressed=true],#faq .fq-filters button[aria-pressed=true]){
  background:var(--oh-ink);
  color:#fff;
  box-shadow:none;
  font-weight:500;
}
body.one-hand :is(#oh#oh#oh,#faq .fq-filters button){flex:1 1 auto}
body.one-hand :is(#oh#oh#oh,#unit-members .ma2 .chips button,#unit-members .filters button)::after{display:none}
body.one-hand :is(#oh#oh#oh,#unit-members .filters){margin:0 0 16px;box-shadow:0 0 0 8px var(--oh-mist)}

/* ---------- One corner ---------- */
body.one-hand :is(#oh#oh#oh,#farm .film,#unit-members .tile,#promise .pr-card,#plans .plan-option,#plans #product-stage){border-radius:var(--oh-corner)}

/* ---------- One text link ---------- */
body.one-hand :is(#oh#oh#oh,#promise .pr-policy,#faq .fq-help a,#site-footer .b-email a){
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}
body.one-hand :is(#oh#oh#oh,#promise .pr-policy,#faq .fq-help a){color:var(--oh-ink);font-weight:500}

/* The wider comparison table let the bowl icon slide onto the same line as its label */
body.one-hand :is(#oh#oh#oh,#comparison .ec-table thead .ec-product-icon){display:block;margin-inline:auto}
body.one-hand :is(#oh#oh#oh,#comparison .ec-table thead th>span){display:block}

/* ---------- Plan cards: a photo of the boxes in the radio's place. The selected card keeps its dark border. ---------- */
body.one-hand :is(#oh#oh#oh,#plans .plan-option){grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:96px;padding:12px 14px 12px 12px}
body.one-hand :is(#oh#oh#oh,#plans .plan-option[aria-pressed=true]){padding:11px 13px 11px 11px}
body.one-hand :is(#oh#oh#oh,#plans .option-photo){display:block;width:72px;height:72px;border-radius:12px;overflow:hidden;background:var(--oh-mist)}
body.one-hand :is(#oh#oh#oh,#plans .option-photo img){display:block;width:100%;height:100%;object-fit:contain;padding:5px}
/* The box count and the serving each get a line, so nothing wraps next to the photo */
body.one-hand :is(#oh#oh#oh,#plans .option-quantity){margin-top:2px;line-height:1.35;letter-spacing:0}
body.one-hand :is(#oh#oh#oh,#plans .option-quantity>span){display:block;height:0;overflow:hidden;padding:0}
/* The skip line sits under the plans wherever the heading's copy of it is hidden */
body.one-hand :is(#oh#oh#oh,#plans .plan-reassure){display:none}
@media (max-width:760px){
  /* Nothing above the plans for now, Shaan's call on Oct 30. A big photo comes back once the food shoot is done. */
  body.one-hand :is(#oh#oh#oh,#plans .gallery-column){display:none}
  body.one-hand :is(#oh#oh#oh,#plans .plan-reassure){display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:var(--oh-small);line-height:1.4;color:var(--oh-ink)}
  body.one-hand :is(#oh#oh#oh,#plans .plan-reassure svg){flex:none;width:16px;height:16px;margin-top:2px}
}
/* Small iPhones and tablets, where the card is narrowest: a slightly smaller photo keeps each line on one row */
@media (max-width:389px),(min-width:761px) and (max-width:999px){
  body.one-hand :is(#oh#oh#oh,#plans .plan-option){grid-template-columns:64px minmax(0,1fr) auto;gap:10px}
  body.one-hand :is(#oh#oh#oh,#plans .option-photo){width:64px;height:64px}
}

/* ---------- What only a phone needs ---------- */
@media (max-width:699px){
  /* The button runs margin to margin. The bottom bar keeps its compact one. */
  body.one-hand :is(#oh#oh#oh,#top .cf-button,#close .close-btn,#faq .fq-cta,#members .more.phone-only,#site-footer .pill-light,#site-footer .pill-line){
    display:flex;
    width:100%;
    min-width:0;
    padding:0 20px;
    justify-content:center;
    align-items:center;
  }
  body.one-hand :is(#oh#oh#oh,#close .close-actions){width:100%}
  body.one-hand :is(#oh#oh#oh,#close .close-actions,#comparison .ec-actions){display:block}
  /* Column heads: Nutrition Mix leads, and Vegetables and Supplements use the label size so they stay on one line */
  body.one-hand :is(#oh#oh#oh,#comparison .ec-table thead th){padding-inline:1px}
  body.one-hand :is(#oh#oh#oh,#comparison .ec-table thead th>span){letter-spacing:-.015em}
  body.one-hand :is(#oh#oh#oh,#comparison .ec-table thead .ec-grocery>span,#comparison .ec-table thead .ec-supplements>span){font-size:var(--oh-micro);letter-spacing:0}
  /* Plan table: words stay whole at 12 */
  body.one-hand :is(#oh#oh#oh,#plans .support-details th,#plans .support-details td){overflow-wrap:normal;padding-inline:3px}
  body.one-hand :is(#oh#oh#oh,#plans .support-details th:first-child){width:21%}
  /* One hairline over the four facts, not two */
  body.one-hand :is(#oh#oh#oh,#top .cf-hero-facts){border-top:0}
}

@media (min-width:375px){
  body.one-hand :is(#oh#oh#oh,#comparison .ec-table thead .ec-grocery>span,#comparison .ec-table thead .ec-supplements>span){white-space:nowrap}
}
@media (min-width:375px) and (max-width:389px){
  body.one-hand :is(#oh#oh#oh,#comparison .ec-table thead .ec-supplements>span){letter-spacing:-.02em}
}

/* ---------- From tablet up ---------- */
@media (min-width:700px){
  body.one-hand :is(#oh#oh#oh,#top .cf-button,#close .close-btn,#faq .fq-cta,#members .more,#site-footer .pill-light,#site-footer .pill-line){
    min-width:214px;
    padding:0 28px;
  }
  body.one-hand :is(#oh#oh#oh,#comparison .ec-expand){width:auto;min-width:240px}
  body.one-hand :is(#oh#oh#oh,#farm .chapters strong){font-size:var(--oh-item);font-weight:500;letter-spacing:-.02em}
}
/* The pause button sits above the four facts until the screen is wide enough for them not to meet */
@media (min-width:700px) and (max-width:1279px){
  body.one-hand :is(#oh#oh#oh,#top .pm-film-toggle){top:auto;bottom:160px}
}
/* Tablet only: keep the layouts from colliding at the larger sizes */
@media (min-width:700px) and (max-width:999px){
  body.one-hand :is(#oh#oh#oh,#farm .film){aspect-ratio:16/10}
  body.one-hand :is(#oh#oh#oh,#promise .pr-card){grid-template-columns:28% minmax(0,1fr)}
  body.one-hand :is(#oh#oh#oh,#promise .pr-copy){padding:32px}
  body.one-hand :is(#oh#oh#oh,#site-footer .b-grid){gap:0 48px}
  body.one-hand :is(#oh#oh#oh,#site-footer .b-actions){grid-auto-flow:row;justify-content:stretch}
  body.one-hand :is(#oh#oh#oh,#site-footer .pill-light,#site-footer .pill-line){min-width:0;width:100%}
}
@media (min-width:1000px){
  body.one-hand :is(#oh#oh#oh,#farm .farm-title){grid-column:1/-1}
}