/* =============================================================
   Farmora — marketing site
   Design system + components
   ============================================================= */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body,
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd {
  margin: 0;
}

ul[class], ol[class] { list-style: none; padding: 0; }

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

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; }

table { border-collapse: collapse; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- Tokens ---------- */
:root {
  /* Greens */
  --forest-900: #0E2A1E;
  --forest-800: #123525;
  --forest-700: #16402D;
  --forest-600: #1E5138;
  --forest-500: #2C6A48;
  --forest-400: #3E8259;

  /* Gold */
  --gold-600: #B7861A;
  --gold-500: #D9A521;
  --gold-400: #E8BC4A;
  --gold-100: #F6E7BE;

  /* Neutrals — warm parchment / sage */
  --parchment: #F6F2E6;
  --parchment-2: #FBF8EF;
  --sage-50: #EDF0E6;
  --sage-100: #E2E8D8;
  --sage-200: #D2DBC6;
  --line: #DCDFCF;

  --ink: #1A2019;
  --ink-2: #3A463A;
  --muted: #66735F;

  --white: #FFFFFF;
  --danger: #B4472F;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Layout */
  --wrap: 1140px;
  --wrap-narrow: 820px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;

  --shadow-sm: 0 1px 2px rgba(14, 42, 30, .06), 0 2px 6px rgba(14, 42, 30, .05);
  --shadow-md: 0 4px 12px rgba(14, 42, 30, .07), 0 12px 28px rgba(14, 42, 30, .08);
  --shadow-lg: 0 10px 24px rgba(14, 42, 30, .10), 0 30px 60px rgba(14, 42, 30, .12);

  --header-h: 68px;
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-2);
  background-color: var(--parchment);
  background-image:
    radial-gradient(900px 520px at 88% -8%, rgba(217, 165, 33, .16), transparent 62%),
    radial-gradient(760px 460px at -6% 4%, rgba(44, 106, 72, .12), transparent 60%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

h1 { font-size: clamp(2.35rem, 1.4rem + 4.1vw, 4rem); }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.5vw, 2.85rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.4rem); line-height: 1.25; }

p a { color: var(--forest-600); text-underline-offset: 3px; }

::selection { background: var(--gold-400); color: var(--forest-900); }

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

/* ---------- Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: clamp(56px, 4vw + 34px, 104px); }
.section--tight { padding-block: clamp(40px, 3vw + 24px, 72px); }

.section--sage {
  background: linear-gradient(180deg, rgba(226, 232, 216, .55), rgba(226, 232, 216, .25));
  border-block: 1px solid var(--line);
}

.section--forest {
  background: var(--forest-800);
  color: var(--sage-100);
}
.section--forest h1,
.section--forest h2,
.section--forest h3 { color: var(--parchment-2); }

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--forest-700);
  color: var(--parchment-2);
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top .18s ease;
  text-decoration: none;
}
.skip-link:focus { top: 0; }

/* ---------- Bits ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--forest-600);
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(217, 165, 33, .25);
}
.section--forest .eyebrow {
  color: var(--gold-400);
  background: rgba(255, 255, 255, .06);
  border-color: rgba(246, 231, 190, .22);
}

.lede {
  font-size: clamp(1.05rem, .98rem + .35vw, 1.2rem);
  color: var(--muted);
  max-width: 60ch;
}
.section--forest .lede { color: rgba(226, 232, 216, .82); }

.section-head { max-width: 62ch; margin-bottom: clamp(32px, 3vw, 52px); }
.section-head--center { margin-inline: auto; text-align: center; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .97rem;
  line-height: 1;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--forest-700);
  color: var(--parchment-2);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--forest-600); box-shadow: var(--shadow-md); }

.btn--gold {
  background: var(--gold-500);
  color: var(--forest-900);
  box-shadow: 0 6px 18px rgba(217, 165, 33, .28);
}
.btn--gold:hover { background: var(--gold-400); }

.btn--ghost {
  background: transparent;
  border-color: var(--forest-700);
  color: var(--forest-700);
}
.btn--ghost:hover { background: rgba(22, 64, 45, .07); }

.section--forest .btn--ghost {
  border-color: rgba(246, 231, 190, .38);
  color: var(--parchment-2);
}
.section--forest .btn--ghost:hover { background: rgba(255, 255, 255, .08); }

.btn--sm { padding: 11px 18px; font-size: .9rem; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 242, 230, .82);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 20px rgba(14, 42, 30, .05);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
/* Logo is a symbol + wordmark lockup (~3.7:1), so it is sized by height. */
.brand__logo {
  height: 32px;
  width: auto;
  display: block;
}
@media (max-width: 400px) {
  .brand__logo { height: 27px; }
}


.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav__link {
  display: inline-block;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.nav__link:hover { background: rgba(22, 64, 45, .07); color: var(--forest-700); }
.nav__link.is-active { color: var(--forest-800); font-weight: 600; background: rgba(22, 64, 45, .09); }

.nav__cta { margin-left: 10px; }

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--forest-800);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav__toggle span::before,
.nav__toggle span::after { content: ""; position: absolute; }
.nav__toggle span { position: relative; }
.nav__toggle span::before { transform: translateY(-6px); }
.nav__toggle span::after { transform: translateY(6px); }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: rotate(-45deg); }

@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 20px 20px;
    background: var(--parchment-2);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__link { padding: 13px 14px; font-size: 1.02rem; }
  .nav__cta { margin: 8px 0 0; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(44px, 4vw + 26px, 92px) clamp(52px, 4vw + 26px, 96px); }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(36px, 4vw, 64px);
  align-items: center;
}

.hero__copy { max-width: 34em; }

.hero h1 { margin-bottom: 20px; }
.hero h1 em {
  font-style: italic;
  color: var(--forest-600);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.hero__note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-size: .88rem;
  color: var(--muted);
}
.hero__note svg { width: 17px; height: 17px; flex: none; color: var(--forest-500); }

.hero__art { position: relative; }

/* Floating chips around the card */
.chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}
.chip .mono { font-size: .82rem; font-weight: 600; }
.chip--tl { top: -14px; left: -12px; }
.chip--br { bottom: -18px; right: -6px; }
.chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--forest-500); flex: none; }
.chip__dot--gold { background: var(--gold-500); }

@media (max-width: 520px) {
  .chip--tl { top: -10px; left: -4px; }
  .chip--br { bottom: -14px; right: -2px; font-size: .76rem; }
}

/* ---------- Batch record card (signature element) ---------- */
.batch-card {
  position: relative;
  z-index: 2;
  background: var(--parchment-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.batch-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
  pointer-events: none;
}

.batch-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  background: var(--forest-800);
  color: var(--sage-100);
}
.batch-card__eyebrow {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 4px;
}
.batch-card__title {
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--parchment-2);
  line-height: 1.2;
}
.batch-card__sub {
  font-size: .8rem;
  color: rgba(226, 232, 216, .7);
  margin-top: 3px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: .72rem;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(246, 231, 190, .14);
  border: 1px solid rgba(246, 231, 190, .26);
  color: var(--parchment-2);
  white-space: nowrap;
}
.pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-400);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(232, 188, 74, .5); }
  50% { opacity: .75; box-shadow: 0 0 0 5px rgba(232, 188, 74, 0); }
}

.batch-card__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.stat-cell {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.stat-cell:nth-child(odd) { border-right: 1px solid var(--line); }
.stat-cell:nth-last-child(-n+2) { border-bottom: 0; }

.stat-cell__label {
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.stat-cell__value {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.stat-cell__value small {
  font-size: .74rem;
  font-weight: 400;
  color: var(--muted);
}
.stat-cell__delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: .72rem;
  margin-top: 5px;
  color: var(--forest-500);
}
.stat-cell__delta--down { color: var(--danger); }
.stat-cell__value--gold { color: var(--gold-600); }
.stat-cell__value--green { color: var(--forest-500); }

.batch-card__progress { padding: 18px 20px; border-bottom: 1px solid var(--line); }
.progress__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.progress__label { font-size: .82rem; font-weight: 600; color: var(--ink); }
.progress__val { font-family: var(--font-mono); font-size: .82rem; color: var(--forest-600); font-weight: 600; }
.progress__track {
  height: 10px;
  border-radius: 999px;
  background: var(--sage-100);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(14, 42, 30, .08);
}
.progress__fill {
  --fill: 72%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--forest-500), var(--gold-500));
  width: var(--fill);
  animation: grow 1.5s cubic-bezier(.2, .7, .3, 1) .25s backwards;
}
@keyframes grow { from { width: 0; } }
.progress__foot {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: .74rem;
  color: var(--muted);
  font-family: var(--font-mono);
}

.batch-card__log { padding: 14px 20px 18px; }
.log__title {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.log__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px dashed var(--line);
  font-size: .87rem;
}
.log__item:first-of-type { border-top: 0; }
.log__left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.log__icon {
  width: 26px; height: 26px; flex: none;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--sage-50);
  color: var(--forest-600);
}
.log__icon svg { width: 14px; height: 14px; }
.log__icon--gold { background: rgba(217, 165, 33, .16); color: var(--gold-600); }
.log__name { color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log__meta { font-size: .74rem; color: var(--muted); }
.log__amt { font-family: var(--font-mono); font-weight: 600; color: var(--ink); white-space: nowrap; }
.log__amt--in { color: var(--forest-500); }
.log__amt--out { color: var(--danger); }

/* ---------- Stat strip ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat-strip__item {
  background: var(--parchment-2);
  padding: clamp(22px, 2.4vw, 34px) 22px;
  text-align: center;
}
.stat-strip__num {
  font-family: var(--font-mono);
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
  font-weight: 600;
  color: var(--forest-700);
  letter-spacing: -.03em;
  line-height: 1;
}
.stat-strip__num span { color: var(--gold-600); }
.stat-strip__label {
  margin-top: 10px;
  font-size: .93rem;
  color: var(--muted);
  max-width: 24ch;
  margin-inline: auto;
}

@media (max-width: 700px) {
  .stat-strip { grid-template-columns: 1fr; }
}

/* ---------- Generic cards / grids ---------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--parchment-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 2vw, 28px);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--sage-200);
}
.card h3 { margin-bottom: 8px; }
.card p { font-size: .96rem; color: var(--muted); }

.icon-box {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--sage-50);
  border: 1px solid var(--sage-100);
  color: var(--forest-600);
  margin-bottom: 16px;
}
.icon-box svg { width: 21px; height: 21px; }
.icon-box--gold {
  background: rgba(217, 165, 33, .14);
  border-color: rgba(217, 165, 33, .28);
  color: var(--gold-600);
}

/* ---------- Problem: notebook vs Farmora ---------- */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.compare__card { position: relative; overflow: hidden; }
.compare__card--old {
  background:
    repeating-linear-gradient(180deg, transparent 0 30px, rgba(102, 115, 95, .16) 30px 31px),
    var(--white);
}
.compare__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.compare__tag--old { background: var(--sage-100); color: var(--muted); }
.compare__tag--new { background: var(--forest-700); color: var(--parchment-2); }

.compare__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 0;
  font-size: .95rem;
}
.compare__list svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.compare__list--old svg { color: #A9846A; }
.compare__list--new svg { color: var(--forest-500); }
.compare__hand {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
}

@media (max-width: 760px) {
  .compare { grid-template-columns: 1fr; }
}

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 34px); }
.step { position: relative; }
.step__num {
  counter-increment: step;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--forest-700);
  color: var(--gold-400);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.step__num::before { content: "0" counter(step); }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: .97rem; }
.step::after {
  content: "";
  position: absolute;
  top: 23px;
  left: 58px;
  right: -18px;
  height: 1px;
  border-top: 2px dotted var(--sage-200);
}
.step:last-child::after { display: none; }

@media (max-width: 800px) {
  .steps { grid-template-columns: 1fr; gap: 22px; }
  .step::after { display: none; }
  .step { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; }
  .step__num { margin-bottom: 0; }
}

/* ---------- Answers tiles ---------- */
.answer-tile {
  background: var(--parchment-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.answer-tile__q {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--ink);
  margin-bottom: 12px;
  line-height: 1.3;
}
.answer-tile__a {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--forest-600);
  letter-spacing: -.03em;
}
.answer-tile__a small { display: block; font-family: var(--font-sans); font-size: .8rem; font-weight: 400; color: var(--muted); margin-top: 6px; letter-spacing: 0; }

/* ---------- Feature groups (Features page) ---------- */
.fgroup + .fgroup { margin-top: clamp(44px, 5vw, 76px); }
.fgroup__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}
.fgroup__index {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--gold-600);
  letter-spacing: .1em;
}
.fgroup__head h2 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); }
.fgroup__head p { color: var(--muted); font-size: .95rem; margin-left: auto; max-width: 42ch; }

.feature-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 9px 0;
  font-size: .96rem;
  color: var(--muted);
}
.feature-list svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--forest-500); }
.feature-list b { color: var(--ink); font-weight: 600; }

/* Mini mock panels used on features page */
.mock {
  background: var(--parchment-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  background: var(--sage-50);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.mock__bar::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-500);
  flex: none;
}
.mock__body { padding: 16px; }

.mock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-size: .9rem;
}
.mock-row:last-child { border-bottom: 0; }
.mock-row span:last-child { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }

.bar-mini { height: 8px; border-radius: 999px; background: var(--sage-100); overflow: hidden; margin-top: 6px; }
.bar-mini i { display: block; height: 100%; background: var(--forest-500); border-radius: 999px; }
.bar-mini i.gold { background: var(--gold-500); }

/* ---------- Location Matchup mock (Farm Boss section) ---------- */
/* A plain table inside the existing .mock frame rather than a new component.
   The real screen marks the leading figure on the figure itself — a separate
   "winner" column would need a name in it, and the name is already the column
   heading. */
.matchup { width: 100%; border-collapse: collapse; font-size: .9rem; }

.matchup__caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 14px;
  color: var(--muted);
  font-size: .86rem;
}

.matchup th,
.matchup td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.matchup thead th {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  vertical-align: bottom;
}
.matchup tbody th { font-weight: 500; color: var(--ink); }
.matchup td { font-family: var(--font-mono); font-size: .86rem; color: var(--muted); }
.matchup tr:last-child th,
.matchup tr:last-child td { border-bottom: 0; }

/* The stock each column holds, under its name — the reason the row labels below
   say "unit" instead of naming birds or fish. */
.matchup__kind {
  display: block;
  margin-top: 3px;
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--gold-600);
}

/* Forest rather than green: the same choice the app makes, so "ahead" reads as
   emphasis and not as a pass/fail verdict. */
.matchup td.is-leader { color: var(--forest-700); font-weight: 600; }
.matchup__flag {
  font-size: .64rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-left: 4px;
  white-space: nowrap;
}

.matchup__note {
  margin-top: 14px;
  font-size: .74rem;
  color: var(--muted);
  max-width: 68ch;
}

@media (max-width: 560px) {
  .matchup { font-size: .84rem; }
  .matchup th, .matchup td { padding: 9px 8px; }
  /* The flag is the first thing to go: the forest weight already carries it. */
  .matchup__flag { display: none; }
}

/* ---------- Batch type tabs (hero card + entry mock) ---------- */
/* Reuses .toggle / .toggle__btn from the pricing switch. That control is a
   two-state group driven by aria-pressed; three mutually exclusive views of one
   panel is a tab set, so these carry role="tab"/aria-selected instead and get
   their own selected rule. */
.toggle--tabs { margin-bottom: 16px; }
.toggle--tabs .toggle__btn { padding: 8px 16px; font-size: .86rem; }
.toggle__btn[aria-selected="true"] {
  background: var(--parchment-2);
  color: var(--forest-700);
  box-shadow: var(--shadow-sm);
}

/* The chips are positioned against the card, not against the card *plus* the
   tab row above it — without this they drift by the height of the tabs. */
.hero__card { position: relative; }

/* Centred over the mock it controls, which is narrower than the text column. */
.mock .toggle--tabs,
.toggle--tabs.toggle--mock { margin-inline: auto; }

@media (max-width: 980px) {
  /* Hero art is centred at this breakpoint, so the tab row follows it. */
  .hero__art > .toggle--tabs { margin-inline: auto; }
}

/* ---------- Pricing ---------- */
.toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
  justify-content: center;
}
.toggle {
  display: inline-flex;
  padding: 4px;
  background: var(--sage-100);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.toggle__btn {
  border: 0;
  background: transparent;
  padding: 9px 20px;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.toggle__btn[aria-pressed="true"] {
  background: var(--parchment-2);
  color: var(--forest-700);
  box-shadow: var(--shadow-sm);
}
.save-badge {
  font-family: var(--font-mono);
  font-size: .76rem;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(217, 165, 33, .18);
  color: var(--gold-600);
  border: 1px solid rgba(217, 165, 33, .3);
}

.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.tier {
  background: var(--parchment-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.2vw, 30px);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tier--featured {
  background: var(--forest-800);
  border-color: var(--forest-700);
  box-shadow: var(--shadow-lg);
  position: relative;
  color: rgba(226, 232, 216, .85);
}
.tier--featured .tier__name,
.tier--featured .tier__price { color: var(--parchment-2); }
.tier--featured .tier__desc { color: rgba(226, 232, 216, .72); }
.tier--featured .tier__list li { color: rgba(226, 232, 216, .88); }
.tier--featured .tier__list svg { color: var(--gold-400); }
.tier--featured .tier__period { color: rgba(226, 232, 216, .6); }
.tier--featured .tier__meta { color: rgba(226, 232, 216, .6); border-top-color: rgba(246, 231, 190, .18); }

.tier__flag {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--gold-500);
  color: var(--forest-900);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(217, 165, 33, .3);
}
.tier__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--ink); }
.tier__desc { font-size: .9rem; color: var(--muted); margin-top: 6px; min-height: 42px; }
.tier__price-row { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 4px; flex-wrap: wrap; }
.tier__price {
  font-family: var(--font-mono);
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.4rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.03em;
  line-height: 1;
}
.tier__period { font-size: .88rem; color: var(--muted); }
.tier__meta {
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--muted);
  min-height: 20px;
}
.tier .btn { margin: 20px 0 18px; }
.tier__list { border-top: 1px solid var(--line); padding-top: 18px; margin-top: auto; }
.tier--featured .tier__list { border-top-color: rgba(246, 231, 190, .18); }
.tier__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 0;
  font-size: .93rem;
  color: var(--ink-2);
}
.tier__list svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--forest-500); }
.tier__list-head {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .tiers { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .tier--featured { margin-top: 14px; }
}

/* Comparison table */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--parchment-2); }
.cmp { min-width: 620px; font-size: .93rem; }
.cmp th, .cmp td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.cmp thead th {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--sage-50);
  white-space: nowrap;
}
.cmp tbody th { font-weight: 500; color: var(--ink); }
.cmp td { color: var(--muted); font-family: var(--font-mono); font-size: .86rem; }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp .yes { color: var(--forest-500); font-weight: 600; }
.cmp .no { color: #A9AFA3; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq__item {
  background: var(--parchment-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 20px;
  box-shadow: var(--shadow-sm);
}
.faq__item[open] { border-color: var(--sage-200); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  width: 12px; height: 12px;
  flex: none;
  border-right: 2px solid var(--forest-600);
  border-bottom: 2px solid var(--forest-600);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq__a { padding: 0 0 18px; color: var(--muted); font-size: .96rem; max-width: 72ch; }

/* ---------- About ---------- */
.prose p { margin-bottom: 20px; font-size: clamp(1rem, .96rem + .28vw, 1.12rem); color: var(--ink-2); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); font-weight: 600; }

.pull-quote {
  border-left: 3px solid var(--gold-500);
  padding: 6px 0 6px 22px;
  margin: 30px 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--forest-700);
}

.timeline { display: grid; gap: 0; }
.tl-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.tl-item:last-child { border-bottom: 1px solid var(--line); }
.tl-when {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-600);
  padding-top: 3px;
}
.tl-what h3 { font-size: 1.1rem; margin-bottom: 5px; }
.tl-what p { color: var(--muted); font-size: .95rem; }

@media (max-width: 620px) {
  .tl-item { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- Legal pages (privacy) ---------- */
.legal__updated {
  margin-top: 14px;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--muted);
}

/* The policy reads as one continuous document, so headings step down well
   below the display sizes used for section titles elsewhere. */
.prose--legal h2 {
  font-size: clamp(1.15rem, 1.02rem + .5vw, 1.35rem);
  line-height: 1.3;
  color: var(--forest-700);
  margin-top: 36px;
  margin-bottom: 12px;
}
.prose--legal h2:first-child { margin-top: 0; }

.prose--legal a {
  color: var(--gold-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose--legal a:hover { color: var(--forest-700); }

/* ul[class] is reset to no bullets globally, so the list has to opt back in. */
.legal-list {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 20px;
}
.legal-list li {
  margin-bottom: 10px;
  font-size: clamp(1rem, .96rem + .28vw, 1.12rem);
  color: var(--ink-2);
}
.legal-list li:last-child { margin-bottom: 0; }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--forest-800);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 4vw, 60px);
  color: rgba(226, 232, 216, .85);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(520px 300px at 82% 8%, rgba(217, 165, 33, .24), transparent 62%),
    radial-gradient(420px 260px at 10% 100%, rgba(62, 130, 89, .38), transparent 60%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--parchment-2); margin-bottom: 14px; }
.cta-band p { color: rgba(226, 232, 216, .78); max-width: 54ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 26px; }
.cta-band__fine {
  margin-top: 18px;
  font-size: .82rem;
  color: rgba(226, 232, 216, .6);
  font-family: var(--font-mono);
}

/* ---------- Waitlist form ---------- */
/* Lives inside .cta-band, so every colour here is chosen against the dark
   forest panel rather than the page background. */
.waitlist { margin: 26px auto 0; max-width: 560px; text-align: left; }

.waitlist__label {
  display: block;
  margin-bottom: 10px;
  font-size: .88rem;
  color: rgba(226, 232, 216, .78);
}

.waitlist__row { display: flex; gap: 10px; flex-wrap: wrap; }

.waitlist__input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(246, 231, 190, .28);
  background: rgba(255, 255, 255, .07);
  color: var(--parchment-2);
  font-size: .97rem;
}
.waitlist__input::placeholder { color: rgba(226, 232, 216, .45); }
.waitlist__input:focus-visible {
  outline: 3px solid var(--gold-400);
  outline-offset: 2px;
  border-color: transparent;
}

/* :invalid alone would paint the field red before the farmer has finished
   typing, so the warning waits until the form has actually been submitted. */
.waitlist.is-invalid .waitlist__input { border-color: #E8927C; }

.waitlist__submit { flex: 0 0 auto; }
.waitlist__submit[disabled] { opacity: .6; cursor: default; transform: none; }

/* Reserves its line so the panel does not jump when a message appears. */
.waitlist__status {
  min-height: 1.35em;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: rgba(226, 232, 216, .7);
}
.waitlist__status--ok { color: var(--gold-400); }
.waitlist__status--error { color: #F0A895; }
.waitlist__status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 480px) {
  /* .btn goes full-width below 480px, so let the field do the same rather than
     leaving it stranded at half a row. */
  .waitlist__input { flex: 1 1 100%; }
}

/* ---------- Store badges ---------- */
/* Official Google Play and App Store artwork, so the sizes are driven by each
   badge's own proportions rather than a shared box. The Play PNG ships with its
   required clear space baked into the canvas (41px of transparency on a 646x250
   image); the App Store SVG has none, so the equivalent breathing room is added
   as padding on the link. Widths are chosen so the two *visible* badges end up
   the same height. */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
.cta-band .store-badges { justify-content: center; }

.store-badge { display: inline-flex; border-radius: var(--radius-sm); }
.store-badge img { display: block; height: auto; }

.store-badge--play img { width: 176px; }
.store-badge--apple { padding: 11px; }
.store-badge--apple img { width: 137px; }

/* Footer column is narrow, so the pair wraps and stacks there. Kept at a
   visible height of 40px rather than shrinking further: below that the App
   Store wordmark stops being legible on a phone. */
.store-badges--sm .store-badge--play img { width: 154px; }
.store-badges--sm .store-badge--apple { padding: 10px; }
.store-badges--sm .store-badge--apple img { width: 120px; }

/* Both badges carry ~10px of clear space at this size (baked into the Play
   canvas, padding on the App Store link), so pull the row back to sit flush
   with the column heading above it. */
.footer__col .store-badges { margin: -6px 0 6px -10px; }

/* An image link has no text to underline, and the global forest focus ring is
   near-invisible on these dark panels, so give the badges a gold one. */
.store-badge:focus-visible {
  outline: 3px solid var(--gold-400);
  outline-offset: 2px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--forest-900);
  color: rgba(226, 232, 216, .72);
  padding-block: clamp(44px, 4vw, 68px) 26px;
  margin-top: clamp(56px, 5vw, 90px);
  font-size: .93rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 44px);
}
.footer__brand .brand__logo { height: 34px; }

.footer__tagline { margin-top: 14px; max-width: 34ch; color: rgba(226, 232, 216, .62); font-size: .92rem; }
.footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--gold-400);
  border: 1px solid rgba(246, 231, 190, .2);
  border-radius: 999px;
  padding: 6px 12px;
}
.footer__col h4 {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 14px;
  font-weight: 500;
}
.footer__col li { margin-bottom: 9px; }
.footer__col a {
  text-decoration: none;
  color: rgba(226, 232, 216, .74);
  transition: color .15s ease;
}
.footer__col a:hover { color: var(--parchment-2); text-decoration: underline; text-underline-offset: 3px; }
.footer__soon {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(246, 231, 190, .55);
  border: 1px solid rgba(246, 231, 190, .22);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  white-space: nowrap;
}
.footer__bottom {
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: 22px;
  border-top: 1px solid rgba(246, 231, 190, .14);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: .82rem;
  color: rgba(226, 232, 216, .55);
}

@media (max-width: 860px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding-block: clamp(40px, 4vw + 20px, 76px) clamp(28px, 3vw, 44px); }
.page-hero h1 { max-width: 18ch; }
.page-hero--center { text-align: center; }
.page-hero--center h1, .page-hero--center .lede { margin-inline: auto; }

/* ---------- Responsive grid collapses ---------- */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { max-width: 480px; margin-inline: auto; width: 100%; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .grid--3 { grid-template-columns: 1fr; }
  .grid--2 { grid-template-columns: 1fr; }
  .fgroup__head p { margin-left: 0; }
}
@media (max-width: 480px) {
  .grid--4 { grid-template-columns: 1fr; }
  .batch-card__stats { grid-template-columns: 1fr; }
  .stat-cell:nth-child(odd) { border-right: 0; }
  .stat-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .stat-cell:last-child { border-bottom: 0; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
}

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}