/* Harvest landing (orchard.veraminds.com). One stylesheet, no build step, no external request.
   Same family as the Verabay site (sticky bar with a mark, a hero with a product picture, a pictured
   "how it works", icon tiles, pricing, one closing band). Colour is spent on meaning: white and a warm
   neutral for the page, deep orchard green only for the brand mark, the headings and the one closing band,
   sky blue for water and irrigation, amber for warnings and withholding, a restrained apple red for the
   primary action. Headings in a sturdy system serif over the system sans. Icons are one line set: round
   caps and joins, drawn in currentColor. Light is the base; dark follows the reader's system setting, and the
   header button (theme.js, the site's one small script) can override it. */

:root {
  color-scheme: light dark;

  --page: #FFFFFF;
  --warm: #F6F4EF;
  --card: #FFFFFF;
  --fill: #F1EFEA;
  --line: #E3E0D9;
  --line-strong: #85827A;
  --ink: #1E2321;
  --ink-2: #565C58;
  --brand: #1F3B2D;

  --accent: #A3242F;
  --accent-ink: #FFFFFF;
  --link: #1E2321;
  --focus: #A3242F;

  --water: #1A649A;
  --water-tint: #E6F1F9;
  --hold: #7A4E00;
  --hold-tint: #FBF1DC;
  --hold-line: #B9852A;

  --closing: #1F3B2D;
  --closing-ink: #FFFFFF;

  --bar: #2F6B45;
  --bar-track: #E8E6E0;

  --shadow: 0 1px 2px rgba(30, 35, 33, .06), 0 12px 32px rgba(30, 35, 33, .08);
  --shadow-screen: 0 2px 4px rgba(30, 35, 33, .06), 0 18px 44px rgba(30, 35, 33, .14);

  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Iowan Old Style", Georgia, "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;

  --gutter: 16px;
  --shell: 72rem;
  --band-pad: 64px;
}

/* Dark: the reader's system setting, unless they pressed the theme button (theme.js sets data-theme on <html>).
   The same tokens twice, because a media query cannot share one rule with an attribute selector. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #151816;
    --warm: #1B1F1C;
    --card: #202522;
    --fill: #262B28;
    --line: #333A36;
    --line-strong: #7E8681;
    --ink: #ECEDEA;
    --ink-2: #B5BAB6;
    --brand: #A9D8B8;

    --accent: #F3B7BF;
    --accent-ink: #3B0F17;
    --link: #ECEDEA;
    --focus: #F3B7BF;

    --water: #8CC8F2;
    --water-tint: #1B2E3B;
    --hold: #F2C46B;
    --hold-tint: #3A3020;
    --hold-line: #A8813A;

    --closing: #1F3B2D;
    --closing-ink: #FFFFFF;

    --bar: #8FD19E;
    --bar-track: #2A302C;

    --shadow: none;
    --shadow-screen: 0 18px 44px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #151816;
  --warm: #1B1F1C;
  --card: #202522;
  --fill: #262B28;
  --line: #333A36;
  --line-strong: #7E8681;
  --ink: #ECEDEA;
  --ink-2: #B5BAB6;
  --brand: #A9D8B8;

  --accent: #F3B7BF;
  --accent-ink: #3B0F17;
  --link: #ECEDEA;
  --focus: #F3B7BF;

  --water: #8CC8F2;
  --water-tint: #1B2E3B;
  --hold: #F2C46B;
  --hold-tint: #3A3020;
  --hold-line: #A8813A;

  --closing: #1F3B2D;
  --closing-ink: #FFFFFF;

  --bar: #8FD19E;
  --bar-track: #2A302C;

  --shadow: none;
  --shadow-screen: 0 18px 44px rgba(0, 0, 0, .45);
}
:root[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}

@media (min-width: 768px) {
  body { font-size: 1.125rem; }
  :root { --gutter: 24px; --band-pad: 88px; }
}
@media (min-width: 1200px) {
  :root { --gutter: 32px; --band-pad: 104px; }
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { margin: 0; color: var(--ink); }

/* Chinese pages: no negative tracking on Han characters, and a measure in em, since ch is the width of a Latin "0". */
:lang(zh) .display, :lang(zh) .display-2, :lang(zh) .closing h2 { letter-spacing: 0; }
:lang(zh) .display { max-width: 9em; }
:lang(zh) .lede, :lang(zh) .aside { max-width: 36em; }
p, ul, ol, dl, dd, figure { margin: 0; }

.shell {
  width: 100%;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 20;
  background: var(--card); color: var(--ink); padding: 12px 16px;
  border: 2px solid var(--ink); border-radius: 8px; font-weight: 600;
}
.skip:focus { top: 12px; }

/* The line icon set */

.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.c-water { color: var(--water); }
.c-hold { color: var(--hold); }
.c-ink { color: var(--ink); }
.c-brand { color: var(--brand); }

/* Brand mark and header */

.mark { flex: none; width: 32px; height: 32px; }
.mark-bg { fill: var(--brand); }
.mark-fg { fill: var(--page); }

.site-head {
  position: sticky; top: 0; z-index: 10;
  background: var(--page);
  border-bottom: 1px solid var(--line);
}
.head-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.wordmark {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  font-family: var(--serif); font-weight: 700; font-size: 1.375rem; line-height: 1; letter-spacing: -0.012em;
  color: var(--ink); text-decoration: none;
}
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px;
  font-size: 0.9375rem; font-weight: 600; text-decoration: none; border-radius: 8px; white-space: nowrap;
}
.site-nav a:hover { background: var(--fill); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.site-nav .nav-hide { display: none; }
@media (min-width: 520px) { .site-nav .nav-hide { display: inline-flex; } }
.head-tools { display: flex; align-items: center; gap: 4px; }
.theme-btn {
  display: inline-grid; place-items: center; width: 44px; height: 48px; padding: 0;
  background: transparent; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer;
}
.theme-btn[hidden] { display: none; }
.theme-btn:hover { background: var(--fill); }
.theme-btn .icon { width: 22px; height: 22px; }
.theme-btn .i-sun, .theme-btn[aria-pressed="true"] .i-moon { display: none; }
.theme-btn[aria-pressed="true"] .i-sun { display: block; }
@media (max-width: 519px) {
  .head-inner { gap: 8px; }
  .site-nav { gap: 2px; }
  .site-nav a { padding: 0 8px; }
}

/* Type */

.display {
  font-family: var(--serif); font-weight: 700; color: var(--brand);
  font-size: clamp(2.5rem, 1.6rem + 3.9vw, 4.25rem);
  line-height: 1.03; letter-spacing: -0.02em;
  max-width: 13ch; text-wrap: balance;
}
.display-2, .h2 {
  font-family: var(--serif); font-weight: 700; color: var(--brand);
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem);
  line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance;
}
.lede {
  margin-top: 20px; max-width: 32em;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.5;
  color: var(--ink-2); text-wrap: pretty;
}
.aside { margin-top: 14px; font-size: 0.9375rem; color: var(--ink-2); max-width: 44em; }
.caption { margin-top: 14px; font-size: 0.9375rem; color: var(--ink-2); max-width: 30em; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 3px 12px;
  border-radius: 14px; border: 1px dashed var(--line-strong);
  font-size: 0.875rem; font-weight: 600; color: var(--ink);
}

/* Buttons */

.actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 22px;
  background: var(--accent); color: var(--accent-ink);
  border: 2px solid var(--accent); border-radius: 10px;
  font-size: 1.0625rem; font-weight: 700; text-decoration: none; line-height: 1.2; text-align: center;
}
.btn:hover { text-decoration: underline; }
.btn-quiet { background: var(--fill); color: var(--ink); border-color: var(--line-strong); }
.btn-inverse { background: var(--closing-ink); color: var(--closing); border-color: var(--closing-ink); }

/* Sections */

.part { padding-block: var(--band-pad); border-top: 1px solid var(--line); }
.part-warm { background: var(--warm); border-top: 0; }
.part-warm + .part { border-top: 0; }
.sec-head { max-width: 44em; }
.center { text-align: center; margin-inline: auto; }

/* Hero */

.hero { padding-block: 40px var(--band-pad); }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) {
  .hero { padding-top: 64px; }
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; }
}

/* Screenshots: a tight crop of a real Harvest screen in a rounded screen card. Each picture comes as a light and
   a dark file; the one that matches the page's theme is shown (system setting or the header button). Cards are
   sized so the app's 16 px text is shown at 11 px or larger. */

.shot { margin: 0; display: grid; justify-items: center; min-width: 0; }
.screen {
  width: min(390px, 100%);
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-screen);
}
.screen img { width: 100%; }
.screen-diary { width: min(340px, 100%); }
.shot .caption { text-align: center; }
.only-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-light { display: none; }
  :root:not([data-theme="light"]) .only-dark { display: block; }
}
:root[data-theme="dark"] .only-light { display: none; }
:root[data-theme="dark"] .only-dark { display: block; }

/* How it works: one diagram */

.flow {
  list-style: none; padding: 0; margin: 40px 0 0;
  display: grid; gap: 0; justify-items: center;
}
.node { display: grid; justify-items: center; text-align: center; width: 100%; max-width: 15rem; }
.node-pic {
  display: grid; place-items: center;
  width: 128px; height: 128px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.node-pic .big { width: 72px; height: 72px; }
.node-pic .big .ic { stroke-width: 1.6; }
.node-screen {
  width: 222px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-screen);
}
.node-screen img { width: 100%; }
.node p { margin-top: 16px; font-weight: 700; font-size: 1.125rem; line-height: 1.3; }
.arrow { display: block; width: 2px; height: 40px; margin: 14px auto; background: var(--line-strong); position: relative; }
.arrow::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 12px; height: 12px; margin-left: -6px;
  border-right: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong);
  transform: rotate(45deg);
}
.flow-note { margin-top: 36px; text-align: center; font-size: 0.9375rem; color: var(--ink-2); }

/* Four across only where each column holds the node screen (220 px of picture, so its text stays at 11 px). */
@media (min-width: 1120px) {
  .flow { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr); align-items: start; }
  .flow > li { width: 100%; }
  .arrow-li { align-self: start; padding-top: 63px; }
  .arrow { width: 40px; height: 2px; margin: 0 auto; }
  .arrow::after { left: auto; right: 0; bottom: auto; top: 50%; margin: -6px 0 0; border-right: 2px solid var(--line-strong); border-bottom: 0; border-top: 2px solid var(--line-strong); }
  .node-screen { margin-top: -22px; }
}

/* What it brings you: icon tiles */

.gains { list-style: none; padding: 0; margin-top: 36px; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (min-width: 900px) { .gains { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.gain {
  display: grid; justify-items: start; gap: 14px;
  padding: 20px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--line);
}
.gain-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; }
.gain-icon .icon { width: 30px; height: 30px; }
.t-hold { background: var(--hold-tint); }
.t-water { background: var(--water-tint); }
.t-fill { background: var(--fill); }
.gain p { font-weight: 700; line-height: 1.3; }
.cta-row { margin-top: 32px; }

/* Feature band: copy and a screenshot */

.feature { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
  .feature-flip .feature-copy { order: 2; }
}

/* What it will not do */

.nots { list-style: none; padding: 0; margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.nots li { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.nots .icon { color: var(--accent); }

/* Pricing */

.tiers { list-style: none; padding: 0; margin-top: 28px; display: grid; gap: 12px; }
@media (min-width: 600px) { .tiers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1100px) { .tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tier { padding: 22px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.tier-pilot { border: 2px solid var(--brand); }
.tier h3 { font-size: 1.0625rem; font-weight: 700; }
.price { margin-top: 8px; font-family: var(--serif); font-weight: 700; font-size: 1.75rem; line-height: 1.15; color: var(--ink); }
.per { margin-top: 4px; font-size: 0.9375rem; color: var(--ink-2); }

/* Questions */

.faq { margin-top: 24px; display: grid; gap: 0; max-width: 60rem; }
@media (min-width: 900px) { .faq { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; } }
.faq div { padding-block: 16px; border-top: 1px solid var(--line-strong); }
.faq dt { font-weight: 700; }
.faq dd { margin-top: 4px; color: var(--ink-2); }

/* The one dark closing band */

.closing { background: var(--closing); color: var(--closing-ink); padding-block: var(--band-pad); }
.closing-grid { display: grid; gap: 36px; }
@media (min-width: 900px) { .closing-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: start; } }
.closing h2, .closing h3, .closing .aside, .closing .aside a { color: var(--closing-ink); }
.closing h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem); line-height: 1.1; }
.closing :focus-visible { outline-color: var(--closing-ink); }
.qual h3 { font-size: 1.0625rem; font-weight: 700; }
.qual ul { list-style: none; padding: 0; margin-top: 12px; }
.qual li { display: flex; align-items: center; gap: 12px; padding-block: 10px; border-top: 1px solid rgba(255, 255, 255, .35); }
.qual .icon { color: var(--closing-ink); }

/* Help page */

.doc-head { padding-block: 40px 8px; }
@media (min-width: 960px) { .doc-head { padding-top: 64px; } }
.doc-head .display { max-width: 18ch; }
.doc { padding-bottom: var(--band-pad); }
.doc-part { padding-block: 36px; border-top: 1px solid var(--line); max-width: 46em; }
.doc-part:first-child { border-top: 0; }
.doc-part h2 {
  font-family: var(--serif); font-weight: 700; color: var(--brand);
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); line-height: 1.15;
}
.doc-part h3 { margin-top: 24px; font-size: 1.125rem; font-weight: 700; }
.doc-part p, .doc-part ul { margin-top: 12px; }
.doc-part ul { padding-left: 1.2em; }
.doc-part li + li { margin-top: 8px; }
.doc-part li::marker { color: var(--ink-2); }

.tag {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  border: 1px solid var(--line-strong); border-radius: 4px;
  font-size: 0.8125rem; font-weight: 600; vertical-align: 0.12em; color: var(--ink);
}
.tag-coming { border-style: dashed; }
.note { margin-top: 16px; padding: 14px 16px; background: var(--warm); border-left: 4px solid var(--line-strong); border-radius: 4px; }

.cta {
  max-width: 44em; padding: 28px 22px;
  background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: 14px;
}
@media (min-width: 768px) { .cta { padding: 40px 44px; } }

/* The Mills table, on the help page */

.mills-wrap { margin-top: 20px; max-width: 52rem; }
.mills { width: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mills caption { text-align: left; caption-side: top; padding-bottom: 12px; font-weight: 700; }
.mills th, .mills td { padding: 7px 0; vertical-align: middle; text-align: left; }
.mills thead th { font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
.mills tbody tr { border-bottom: 1px solid var(--line); }
.mills .col-t { width: 8.5rem; }
.mills .col-h { width: auto; }
.mills tbody th { font-weight: 600; padding-right: 12px; }
.mills .f { display: block; font-size: 0.875rem; font-weight: 400; color: var(--ink-2); }
.hrs { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hrs-n { flex: none; width: 2.6em; text-align: right; font-weight: 700; font-size: 1.0625rem; }
.bar { flex: 1 1 auto; min-width: 0; height: 18px; background: var(--bar-track); border-radius: 3px; overflow: hidden; }
.bar > span { display: block; height: 100%; width: calc(var(--h) / 30 * 100%); background: var(--bar); }
/* Wet hours per row, as classes so the page needs no inline style. */
.bar > .h-30 { --h: 30; }
.bar > .h-25 { --h: 25; }
.bar > .h-22 { --h: 22; }
.bar > .h-20 { --h: 20; }
.bar > .h-19 { --h: 19; }
.bar > .h-17 { --h: 17; }
.bar > .h-15 { --h: 15; }
.bar > .h-14-5 { --h: 14.5; }
.bar > .h-14 { --h: 14; }
.bar > .h-13 { --h: 13; }
.bar > .h-12 { --h: 12; }
.bar > .h-11-5 { --h: 11.5; }
.bar > .h-11 { --h: 11; }
.bar > .h-10 { --h: 10; }
.bar > .h-9-5 { --h: 9.5; }
.bar > .h-9 { --h: 9; }
.mills .edge td { color: var(--ink-2); font-style: italic; }
@media (min-width: 768px) {
  .mills .col-t { width: 13rem; }
  .mills .f { display: inline; margin-left: 6px; }
  .bar { height: 22px; }
}
.mills-note { margin-top: 16px; font-size: 0.9375rem; color: var(--ink-2); max-width: 44em; }

/* Footer */

.site-foot { border-top: 1px solid var(--line); padding-block: 32px 40px; font-size: 0.9375rem; color: var(--ink-2); }
.closing + .site-foot { border-top: 0; }
.site-foot p + p { margin-top: 8px; }
.site-foot a { color: var(--ink-2); }
.foot-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.foot-brand .mark { width: 24px; height: 24px; }
.foot-brand b { font-family: var(--serif); font-size: 1.125rem; letter-spacing: -0.012em; }
.site-foot .foot-brand + p { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .site-head { position: static; }
  .closing { background: transparent; color: var(--ink); border-top: 1px solid var(--ink); }
  .closing h2, .closing h3, .closing .aside, .closing .aside a, .qual .icon { color: var(--ink); }
}