/*
  The landing page.

  Same palette as the app and the web planner — a gardener who taps through
  from here should not feel they have changed product. The values are the ones
  in reactNativeApp/src/theme/tokens.ts and public/styles.css.

  Premium here means restraint: generous space, one accent, a serif for the
  headlines and a system sans for everything else, and motion that only ever
  confirms what the eye is already doing. No gradient soup, no drop shadows on
  text, nothing that moves while being read.
*/

:root {
  --bg: #f4f6f2;
  --card: #ffffff;
  --ink: #16241c;
  --muted: #667a6f;
  --muted-deep: #4f6159;
  --line: #e2e8e0;
  --green: #2f6f4e;
  --green-dark: #245a3f;
  --green-soft: #e6f1ea;
  --amber: #b5761f;
  --amber-soft: #fdf3e2;

  --shell: 1120px;
  --radius: 18px;
  --radius-sm: 12px;

  /* A serif for headlines reads editorial rather than SaaS, which suits a
     subject people have been writing about for four hundred years. */
  --display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/*
  Nothing may be wider than the phone.

  The store buttons carried a min-width that, two across plus the shell padding,
  came to more than a 414px screen. Flex-wrap should have caught it and did not,
  because once anything overflows the flex container is handed the wider width
  and stops needing to wrap — so the whole page scrolled sideways and every
  line was clipped mid-word. The guard belongs at the root, not on the one
  element that happened to trip it.
*/
html, body { max-width: 100%; overflow-x: hidden; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--green); }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}

/* ------------------------------------------------------------------ *
 * Motion
 *
 * One reveal, used everywhere, driven by IntersectionObserver. Elements
 * start slightly low and transparent and settle when they arrive. Anyone
 * who has asked their system for less motion gets none of it — and, just
 * as importantly, still gets the content, because the resting state is
 * the visible one.
 * ------------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .float, .sheen { animation: none !important; }
}

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */
header.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(244, 246, 242, .82);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
header.top.stuck { border-bottom-color: var(--line); }

.top .bar {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 68px;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.2px;
  color: var(--ink);
  text-decoration: none;
}
.wordmark img { width: 30px; height: 30px; border-radius: 8px; }

.top nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
}
.top nav a {
  color: var(--muted-deep);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}
.top nav a:hover { color: var(--green); }
@media (max-width: 760px) { .top nav .hide-sm { display: none; } }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--green);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform .18s, background .18s, box-shadow .18s;
  box-shadow: 0 1px 2px rgba(20, 40, 25, .16);
}
.btn:hover { background: var(--green-dark); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20, 40, 25, .18); }
.btn.ghost {
  background: transparent;
  color: var(--green) !important;
  border: 1.5px solid var(--line);
  box-shadow: none;
}
.btn.ghost:hover { border-color: var(--green); background: var(--green-soft); }

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */
.hero { padding: 76px 0 88px; position: relative; overflow: hidden; }

/* A soft wash behind the hero, so the fold has depth without a photograph. */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% 40% 30% -20%;
  background: radial-gradient(closest-side, rgba(47, 111, 78, .10), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: -10% -25% 20% 55%;
  background: radial-gradient(closest-side, rgba(181, 118, 31, .09), transparent 70%);
  pointer-events: none;
}

.hero .grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  .hero { padding: 48px 0 60px; }
  .hero .grid { grid-template-columns: 1fr; gap: 40px; }
}

.flag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green-dark);
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 22px;
}
.flag svg { width: 16px; height: 16px; }

h1 {
  overflow-wrap: break-word;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(40px, 5.4vw, 62px);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0 0 20px;
}
h1 em { font-style: italic; color: var(--green); }

.lede {
  font-size: clamp(17px, 1.5vw, 19.5px);
  line-height: 1.62;
  color: var(--muted-deep);
  margin: 0 0 30px;
  max-width: 34em;
}

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

.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.store {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  /* Grow to fill a row, but never demand more than the screen has. */
  flex: 1 1 190px;
  min-width: 0;
}
/*
  The one that is actually a link.

  .store is shared with the Google Play badge, which is still a plain div while
  Android is in closed testing — so the live one needs the things an anchor
  drags in with it (underline, link colour) taken back off, and the things a
  button should have (a pointer, a press) put on. Keeping one .store rule for
  both means the two badges cannot drift apart visually while only one of them
  is tappable.
*/
.store-live {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.store-live:hover { border-color: var(--green); }
.store-live:active { transform: translateY(1px); }
/* Keyboard users get the same ring the rest of the page uses. */
.store-live:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.store svg { width: 22px; height: 22px; flex: none; }
.store b { display: block; font-size: 14.5px; line-height: 1.2; }
.store span { display: block; font-size: 11.5px; color: var(--muted); letter-spacing: .02em; }

/* The phone. A frame drawn in CSS rather than a screenshot, so it stays
   crisp at any width and weighs nothing. */
.device-wrap { display: flex; justify-content: center; position: relative; }
.device {
  width: min(330px, 78vw);
  border-radius: 42px;
  background: linear-gradient(160deg, #21402f, #16241c);
  padding: 11px;
  box-shadow:
    0 42px 80px -28px rgba(16, 34, 22, .55),
    0 8px 24px -10px rgba(16, 34, 22, .3),
    inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.device .screen {
  border-radius: 32px;
  background: var(--bg);
  overflow: hidden;
  position: relative;
  line-height: 0;   /* no descender gap under the screenshot */
}
.device .screen img { width: 100%; height: auto; }

/* Used in the bed-planner split and the gallery, where three phones share a
   row and each needs to be smaller than the hero's. */
.device.small { width: 100%; max-width: 268px; padding: 8px; border-radius: 34px; }
.device.small .screen { border-radius: 27px; }
.device .notch {
  position: absolute;
  top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 92px; height: 22px;
  border-radius: 999px;
  background: #16241c;
  z-index: 3;
}
.float { animation: float 7s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* The mock screen inside the phone. */
.mock-top {
  background: var(--green);
  color: #fff;
  padding: 42px 18px 18px;
}
.mock-top .where {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .18);
  padding: 5px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
}
.mock-top h4 { margin: 12px 0 2px; font-size: 20px; font-weight: 700; }
.mock-top p { margin: 0; font-size: 12px; opacity: .85; }

.mock-body { padding: 14px; display: grid; gap: 10px; }
.mock-card {
  background: var(--card);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(20, 40, 25, .06);
}
.mock-card h5 { margin: 0 0 3px; font-size: 13px; font-weight: 700; }
.mock-card p { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; }

/* A month bar, the thing the app is actually for. */
.bar-months { display: flex; gap: 3px; margin-top: 9px; }
.bar-months i {
  height: 8px; flex: 1; border-radius: 2px;
  background: var(--line);
}
.bar-months i.sow { background: #7fb894; }
.bar-months i.plant { background: var(--green); }
.bar-months i.pick { background: var(--amber); }

/* ------------------------------------------------------------------ *
 * Sections
 * ------------------------------------------------------------------ */
section { padding: 84px 0; }
@media (max-width: 760px) { section { padding: 58px 0; } }

.eyebrow {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 14px;
}
h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(29px, 3.6vw, 42px);
  line-height: 1.14;
  letter-spacing: -.015em;
  margin: 0 0 16px;
}
.section-lede {
  font-size: 17.5px;
  color: var(--muted-deep);
  max-width: 40em;
  margin: 0 0 44px;
  line-height: 1.62;
}
.center { text-align: center; }
.center .section-lede { margin-left: auto; margin-right: auto; }

/* The argument section — a zone is not a garden. */
.contrast {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 34px;
}
@media (max-width: 760px) { .contrast { grid-template-columns: 1fr; } }
.zone-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}
.zone-card .place { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.zone-card .zone { font-family: var(--display); font-size: 40px; line-height: 1; margin: 8px 0 16px; }
.zone-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; font-size: 14.5px; }
.zone-card dt { color: var(--muted); }
.zone-card dd { margin: 0; font-weight: 700; text-align: right; }
.verdict {
  margin-top: 26px;
  padding: 18px 22px;
  border-radius: var(--radius-sm);
  background: var(--amber-soft);
  color: #6d4712;
  font-size: 15.5px;
  border-left: 4px solid var(--amber);
}

/* The factor chips. */
.factors { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.factor {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 14.5px;
  font-weight: 600;
}
.factor b { color: var(--green); font-weight: 800; }

/* Feature grid. */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 940px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .features { grid-template-columns: 1fr; } }

.feature {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.feature:hover {
  transform: translateY(-3px);
  border-color: #d3ded6;
  box-shadow: 0 18px 40px -22px rgba(16, 34, 22, .35);
}
.feature .ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--green-soft);
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.feature .ico svg { width: 22px; height: 22px; }
.feature h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.feature p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.58; }

/* Numbers. */
.band {
  background: var(--green);
  color: #fff;
  border-radius: 26px;
  padding: 52px 40px;
  position: relative;
  overflow: hidden;
}
.band::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(closest-side at 82% 18%, rgba(255, 255, 255, .12), transparent 70%);
  pointer-events: none;
}
.stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 30px 18px; } .band { padding: 40px 24px; } }
.stat .n {
  font-family: var(--display);
  font-size: clamp(32px, 4.4vw, 46px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat .l { font-size: 13.5px; opacity: .84; margin-top: 8px; line-height: 1.4; }

/* Steps. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 26px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.step::before {
  counter-increment: step;
  content: counter(step);
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--green); color: #fff;
  font-weight: 800; font-size: 15px;
  margin-bottom: 15px;
}
.step h3 { margin: 0 0 7px; font-size: 17px; }
.step p { margin: 0; color: var(--muted); font-size: 15px; }

/* Pricing. */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 760px; margin: 0 auto; }
@media (max-width: 700px) { .plans { grid-template-columns: 1fr; } }
.plan {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  position: relative;
  text-align: left;
}
.plan.best { border-color: var(--green); background: linear-gradient(180deg, var(--green-soft), var(--card) 55%); }
.plan .tag {
  position: absolute; top: -12px; right: 20px;
  background: var(--green); color: #fff;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  padding: 5px 12px; border-radius: 999px;
}
.plan .name { font-size: 14px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.plan .price { font-family: var(--display); font-size: 42px; line-height: 1.1; margin: 10px 0 2px; }
.plan .price small { font-family: var(--sans); font-size: 15px; color: var(--muted); font-weight: 600; }
.plan .each { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.plan li { font-size: 15px; display: flex; gap: 9px; align-items: flex-start; }
.plan li svg { width: 17px; height: 17px; flex: none; margin-top: 3px; }

.trial-note { text-align: center; color: var(--muted); font-size: 14.5px; margin-top: 26px; }

/* FAQ. */
.faq { max-width: 780px; margin: 0 auto; }
.qa {
  border-bottom: 1px solid var(--line);
}
.qa summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 40px 22px 0;
  font-size: 17px;
  font-weight: 700;
  position: relative;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  position: absolute; right: 6px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s;
}
.qa[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.qa p { margin: 0 0 22px; color: var(--muted-deep); font-size: 15.5px; }

/* Closing call. */
.closing { text-align: center; padding: 92px 0 100px; }
.closing img { width: 76px; height: 76px; border-radius: 18px; margin: 0 auto 22px; box-shadow: 0 14px 34px -14px rgba(16, 34, 22, .45); }

/* Footer. */
footer {
  border-top: 1px solid var(--line);
  padding: 40px 0 56px;
  font-size: 14.5px;
  color: var(--muted);
}
footer .rows { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; }
footer a { color: var(--muted-deep); text-decoration: none; }
footer a:hover { color: var(--green); text-decoration: underline; }
footer .spacer { margin-left: auto; }
@media (max-width: 640px) { footer .spacer { margin-left: 0; width: 100%; } }


/* ------------------------------------------------------------------ *
 * Split section — copy beside a screenshot
 * ------------------------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 38px; }
  /* Picture first on a phone: it explains the section faster than the
     heading does, and the heading is still one thumb-flick away. */
  .split-shot { order: -1; }
}
.split-shot { display: flex; justify-content: center; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.55; color: var(--muted-deep); }
.ticks svg { width: 19px; height: 19px; flex: none; margin-top: 3px; }
.ticks b { color: var(--ink); }

/* ------------------------------------------------------------------ *
 * Screenshot gallery
 * ------------------------------------------------------------------ */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  max-width: var(--shell);
  margin: 46px auto 0;
  padding: 0 24px;
}
@media (max-width: 860px) {
  .gallery { grid-template-columns: 1fr; gap: 44px; max-width: 420px; }
}
.gallery figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.gallery figcaption {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted-deep);
  text-align: center;
}

/* ------------------------------------------------------------------ *
 * The statistics band, rebuilt
 *
 * The first version was four numbers floating on a green slab with nothing
 * to hold them together and nothing saying why they were there. This gives
 * them a claim to sit under, a hairline grid so the eye reads them as one
 * table rather than four posters, and a third line each so the number means
 * something on its own.
 * ------------------------------------------------------------------ */
.band-head {
  position: relative;
  max-width: 46em;
  margin-bottom: 40px;
}
.band-head h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.32;
  margin: 0;
  color: #fff;
  letter-spacing: -.01em;
}

.stats { text-align: left; gap: 0; }
.stat {
  padding: 6px 26px 6px 0;
  position: relative;
}
/* Hairlines between, not around — a rule after each stat except the last in
   its row, so the group reads as one object. */
.stat + .stat { padding-left: 26px; }
.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 1px;
  background: rgba(255, 255, 255, .22);
}
.stat .n {
  font-weight: 500;
  letter-spacing: -.02em;
}
.stat .l {
  font-size: 14.5px;
  font-weight: 700;
  opacity: 1;
  margin-top: 10px;
  letter-spacing: .01em;
}
.stat .s {
  font-size: 13px;
  line-height: 1.45;
  opacity: .72;
  margin-top: 4px;
}
@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  /* On two columns the hairline only belongs between the pair, not before
     the item that starts a new row. */
  .stat:nth-child(odd) { padding-left: 0; }
  .stat:nth-child(odd)::before { display: none; }
}