/* Landing page (pages/landing). The page draws its own header and footer
   (content_for :own_chrome) from the brand partials, so every section here
   is full-bleed and centers its own content. Shared type scale, rules,
   decor, header, and footer are in brand.css; decorative art is pinned to
   the brand frame with --brand-gutter so it hugs the content on wide
   screens. */

/* Book promo banner (feature-flagged) */
.landing-banner {
  position: relative;
  z-index: 2;
  display: block;
  background-color: var(--color-green-50);
  border-bottom: 1px solid var(--color-green-300);
  padding: 1rem;
  transition-property: color, background-color, border-color;
  transition-timing-function: var(--default-transition-timing-function);
  transition-duration: var(--default-transition-duration);
}
@media (hover: hover) {
  .landing-banner:hover { border-color: var(--color-green-500); }
  .landing-banner:hover .landing-banner__text { color: var(--color-green-800); }
}
.landing-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  text-align: center;
}
.landing-banner__icon {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl--line-height);
}
.landing-banner__text {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-700);
}
@media (min-width: 48rem) {
  .landing-banner__text {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
  }
}
.landing-banner__highlight {
  color: var(--color-green-700);
  font-weight: var(--font-weight-semibold);
}

/* Hero. Kept short enough that "How it works" shows above the fold on a
   laptop, so it's clear the page continues. */
.landing-hero {
  position: relative;
  padding-bottom: 2rem;
  text-align: center;
}
.landing-hero__decor {
  top: 0;
  width: clamp(12rem, 34vw, 39rem);
  height: auto;
  opacity: .3;
}
/* Tablets: the art would sit under the headline, so keep it faint */
@media (min-width: 48rem) {
  .landing-hero__decor { opacity: .5; }
}
@media (min-width: 80rem) {
  .landing-hero__decor { width: clamp(30rem, 34vw, 39rem); opacity: 1; }
}
/* Ultrawide: the art no longer reaches the viewport edge, so fade its
   straight-cropped outer and bottom edges into the page */
@media (min-width: 100rem) {
  .landing-hero__decor {
    mask-image: linear-gradient(var(--fade-dir), transparent, #000 20%), linear-gradient(to bottom, #000 75%, transparent);
    mask-composite: intersect;
  }
  .landing-hero__decor--left { --fade-dir: to right; }
  .landing-hero__decor--right { --fade-dir: to left; }
}
.landing-hero__decor--left { left: var(--brand-gutter); }
.landing-hero__decor--right { right: var(--brand-gutter); }
.landing-hero__body {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  margin: 0 auto;
  padding: 4rem 1.25rem 0;
}
@media (min-width: 64rem) {
  .landing-hero__body { padding-top: 7rem; }
}
.landing-hero__title {
  font-size: var(--brand-fs-h1);
  line-height: 1.07;
  font-weight: var(--font-weight-semibold);
  color: var(--color-cta);
}
.landing-hero__lead {
  max-width: 35rem;
  margin: .75rem auto 2rem;
  font-size: var(--brand-fs-lead);
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* How it works: steps step right as they go down on wide screens */
.landing-how { padding-top: 2.5rem; }
.landing-how__radish {
  top: 2rem;
  right: calc(var(--brand-gutter) - 4rem);
  width: 20rem;
  height: auto;
  opacity: .8;
}
.landing-how__carrot {
  bottom: 0;
  left: calc(var(--brand-gutter) - 2rem);
  width: 22rem;
  height: auto;
  transform: scaleX(-1) rotate(-45deg);
  opacity: .8;
}
@media (max-width: 79.99rem) {
  .landing-how__radish, .landing-how__carrot { display: none; }
}
.landing-steps {
  position: relative;
  max-width: 64rem;
  margin: 0 auto;
}
.landing-step {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: 2rem;
}
@media (min-width: 48rem) {
  .landing-step {
    grid-template-columns: 10rem minmax(0, 30rem);
    gap: 1.5rem;
    margin-bottom: 1rem;
  }
  .landing-step:nth-child(2) { margin-left: 4rem; }
  .landing-step:nth-child(3) { margin-left: 8rem; }
}
@media (min-width: 64rem) {
  .landing-step:nth-child(2) { margin-left: 10rem; }
  .landing-step:nth-child(3) { margin-left: 20rem; }
}
.landing-step__title {
  margin: .25rem 0 .5rem;
  font-style: italic;
  font-weight: var(--font-weight-medium);
  font-size: var(--brand-fs-h3);
  line-height: 1.2;
  color: var(--brand-ink);
}
@media (min-width: 48rem) {
  .landing-step__title { margin-top: 2.5rem; }
}
.landing-step__text {
  font-size: var(--brand-fs-body);
  line-height: 1.5;
}
@media (min-width: 48rem) {
  .landing-step__text { padding-left: 2.5rem; }
}

/* Zone map. Wide: text and legend beside the map. Narrow: text, map, then
   the legend as a compact row of swatches. */
.landing-zone__dahlia {
  top: -2rem;
  right: calc(var(--brand-gutter) - 5rem);
  width: 18rem;
  height: auto;
  opacity: .85;
}
@media (max-width: 79.99rem) {
  .landing-zone__dahlia { display: none; }
}
.landing-zone__grid {
  position: relative;
  display: grid;
  grid-template-areas: "text" "map" "legend";
  gap: 1.5rem;
  max-width: 70rem;
  margin: 0 auto;
}
.landing-zone__text { grid-area: text; }
.landing-zone__legend { grid-area: legend; }
.landing-map { grid-area: map; }
@media (min-width: 64rem) {
  .landing-zone__grid {
    grid-template-columns: 19rem 1fr;
    grid-template-areas: "text text" "legend map";
    column-gap: 4rem;
    row-gap: 2.5rem;
  }
  .landing-zone__text { max-width: 40rem; margin-inline: auto; text-align: center; }
}
.landing-zone .map-legend {
  position: relative;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  box-shadow: none;
}
.landing-zone .map-legend__title { font-size: 1.25rem }
.landing-zone__zones {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .25rem 1rem;
  margin-top: .375rem;
}
.landing-zone .map-legend__item { gap: .375rem; }
.landing-zone__zone--current { font-weight: var(--font-weight-bold); }
.landing-zone__callout {
  margin-top: .75rem;
  font-family: var(--font-serif);
  font-size: var(--text-sm);
}
/* Wide: a vertical key with the callout drawn out from the current zone's
   row, as in the mockup. The legend stretches to the map's height and its
   13 zone rows share that height evenly (a subgrid of the legend). The
   callout is pinned to row N (data-zone-row, set by the view and
   zone_finder_controller), on top of the zone item. */
@media (min-width: 64rem) {
  /* Stretches to the map's height so the two panels line up */
  .landing-zone__legend {
    align-self: stretch;
    display: grid;
    grid-template-rows: auto repeat(13, minmax(0, 1fr));
  }
  .landing-zone__zones {
    grid-row: 2 / -1;
    grid-template-columns: auto;
    grid-template-rows: subgrid;
    gap: 0;
    margin-top: 0;
  }
  /* Absolutely positioned inside its grid row, so its height never feeds
     into the row sizes */
  .landing-zone__callout {
    position: absolute;
    inset: 0 0 0 2.375rem;
    grid-row: var(--zone-line) / span 1;
    grid-column: 1 / span 1;
    display: flex;
    align-items: center;
    gap: .375rem;
    /* Clears two-digit zone labels; long text wraps under itself, over the
       blank space beside the neighboring rows, so the rows don't move */
    margin: 0;
    line-height: 1.625rem;
    text-wrap: balance;
  }
  .landing-zone__callout::before {
    content: "";
    flex-shrink: 0;
    width: 2.25rem;
    height: 2px;
    background-color: var(--color-text-muted);
  }
}
/* No inline styles, so each possible row gets a rule. Zone N sits on grid
   line N + 1, after the legend title's row. */
.landing-zone__callout[data-zone-row="1"] { --zone-line: 2; }
.landing-zone__callout[data-zone-row="2"] { --zone-line: 3; }
.landing-zone__callout[data-zone-row="3"] { --zone-line: 4; }
.landing-zone__callout[data-zone-row="4"] { --zone-line: 5; }
.landing-zone__callout[data-zone-row="5"] { --zone-line: 6; }
.landing-zone__callout[data-zone-row="6"] { --zone-line: 7; }
.landing-zone__callout[data-zone-row="7"] { --zone-line: 8; }
.landing-zone__callout[data-zone-row="8"] { --zone-line: 9; }
.landing-zone__callout[data-zone-row="9"] { --zone-line: 10; }
.landing-zone__callout[data-zone-row="10"] { --zone-line: 11; }
.landing-zone__callout[data-zone-row="11"] { --zone-line: 12; }
.landing-zone__callout[data-zone-row="12"] { --zone-line: 13; }
.landing-zone__callout[data-zone-row="13"] { --zone-line: 14; }
.landing-map {
  height: 20rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
@media (min-width: 48rem) {
  .landing-map { height: 26rem; }
}
@media (min-width: 64rem) {
  .landing-map { height: 32rem; }
}

/* Sample timeline */
.landing-timeline__intro {
  display: grid;
  gap: 1rem;
  max-width: 54rem;
  margin: 0 auto 2.5rem;
}
@media (min-width: 48rem) {
  .landing-timeline__intro {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
  }
  .landing-timeline__title { margin: 0; text-align: right; }
}
.landing-timeline__row {
  display: grid;
  max-height: 600px;
  grid-template-columns: 5.5rem 1fr 1fr 1fr;
  align-items: center;
  max-width: 64rem;
  margin: 0 auto;
  padding-block: 1.25rem;
}
@media (min-width: 48rem) {
  .landing-timeline__row { grid-template-columns: 12rem 1fr 1fr 1fr; padding-block: 2rem; }
}
.landing-timeline__image {
  width: 100%;
  max-width: 11rem;
  height: 6rem;
  object-fit: contain;
  justify-self: center;
}
@media (min-width: 48rem) {
  .landing-timeline__image { height: 6rem; }
}
.landing-timeline__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.5rem;
  padding-inline: .5rem;
  border-left: 3px solid var(--brand-ink);
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-medium);
  font-size: var(--brand-fs-body);
  line-height: 1.3;
  color: var(--color-black);
}
@media (min-width: 48rem) {
  .landing-timeline__cell {
    min-height: 6.5rem;
    padding-inline: 1.5rem;
    border-left-width: 4px;
    font-size: var(--brand-fs-h3);
  }
}
.landing-timeline__date {
  padding: .125rem .625rem;
  border-radius: var(--radius-lg);
  white-space: nowrap;
}
.landing-timeline__date--start { background-color: #f3e8ff; color: var(--color-purple-600); }
.landing-timeline__date--sow { background-color: #ebf6cc; color: var(--brand-ink); }
.landing-timeline__date--harden { background-color: var(--color-yellow-100); color: var(--color-yellow-700); }
.landing-timeline__date--transplant { background-color: var(--color-blue-100); color: var(--color-blue-700); }
.landing-timeline__date--harvest { background-color: var(--color-orange-100); color: var(--color-orange-700); }

/* Plant guides */
.landing-guides__rose {
  top: 5rem;
  left: calc(var(--brand-gutter) - 14rem);
  width: 40rem;
  height: auto;
  transform: rotate(-60deg);
  opacity: .9;
}
@media (max-width: 79.99rem) {
  .landing-guides__rose { display: none; }
}
.landing-guides__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
  max-width: 64rem;
  margin: 3rem auto 0;
}
@media (min-width: 48rem) {
  .landing-guides__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem 2.5rem; }
}
@media (min-width: 64rem) {
  .landing-guides__grid { gap: 3rem 4.5rem; }
}
.landing-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.landing-guide__image {
  width: 100%;
  max-width: 13rem;
  box-shadow: 0 1px 2px #19381f1a;
  transition: transform .15s, box-shadow .15s;
}
@media (hover: hover) {
  .landing-guide:hover .landing-guide__image {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px -6px #19381f40;
  }
}
.landing-guide__name {
  margin-top: 1.25rem;
  padding-bottom: .5rem;
  font-size: var(--brand-fs-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
}
.landing-guide__name {
  transition: color .15s;
}
.landing-guide__name::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 3px;
  margin: .625rem auto 0;
  background-color: var(--brand-ink);
  transition: width .15s, background-color .15s;
}
@media (hover: hover) {
  .landing-guide:hover .landing-guide__name { color: var(--color-cta); }
  .landing-guide:hover .landing-guide__name::after { width: 6.5rem; background-color: var(--color-cta); }
}

/* Features + pricing band */
.landing-plans {
  position: relative;
  padding: 4rem 1.25rem 3.5rem;
  background-color: var(--color-green-800);
  color: var(--color-paper);
  text-align: center;
}
.landing-plans__jalapeno {
  bottom: 0;
  left: var(--brand-gutter);
  width: clamp(12rem, 24vw, 22rem);
  height: auto;
}
.landing-plans__roses {
  top: 0;
  right: var(--brand-gutter);
  width: clamp(12rem, 24vw, 22rem);
  height: auto;
}
/* Below desktop the art would sit under the lists */
@media (max-width: 79.99rem) {
  .landing-plans__jalapeno, .landing-plans__roses { opacity: .25; }
}
.landing-plans__grid {
  position: relative;
  display: grid;
  gap: 2.5rem;
  max-width: 60rem;
  margin: 0 auto 2.5rem;
  text-align: left;
}
@media (min-width: 48rem) {
  .landing-plans__grid { grid-template-columns: 1fr auto 1.15fr; gap: 3rem; }
}
.landing-plans__title {
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: var(--brand-fs-h2);
  font-weight: var(--font-weight-semibold);
}
.landing-plans__list {
  padding-left: 1.25rem;
  list-style: disc;
  font-size: var(--brand-fs-body);
  line-height: 1.6;
}
.landing-plans__list--sm { line-height: 1.45; }
.landing-plans__more {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--font-weight-bold);
  font-size: var(--brand-fs-h3);
  text-align: center;
}
/* Vertical version of .brand-rule, in paper */
.landing-plans__divider {
  position: relative;
  width: 3px;
  margin-block: .5rem;
  background-color: var(--color-paper);
}
.landing-plans__divider::before,
.landing-plans__divider::after {
  content: "";
  position: absolute;
  left: 50%;
  width: .55rem;
  height: .55rem;
  border: 2px solid var(--color-paper);
  background-color: var(--color-green-800);
  transform: translateX(-50%) rotate(45deg);
}
.landing-plans__divider::before { top: -.3rem; }
.landing-plans__divider::after { bottom: -.3rem; }
@media (max-width: 47.99rem) {
  .landing-plans__divider { display: none; }
}
.landing-plan {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.landing-plan__name {
  font-style: italic;
  font-weight: var(--font-weight-semibold);
  font-size: var(--brand-fs-h3);
  line-height: 1.2;
  white-space: nowrap;
}
.landing-plan__price {
  margin-top: .25rem;
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: var(--brand-fs-h2);
  line-height: 1.1;
  color: var(--color-meadow);
}
.landing-plan__period { font-size: .5em; font-weight: var(--font-weight-medium); }
.landing-plan__alt {
  margin-top: .25rem;
  font-size: var(--text-sm);
  opacity: .8;
}
.landing-plans__cta { position: relative; }

/* Final CTA */
.landing-final {
  padding-block: 4.5rem 5rem;
  text-align: center;
}
.landing-final .brand-text { margin-block: 1.5rem 2.5rem; }

/* Fraunces swaps in "wonky" italic glyphs (curled h, k, b) at large optical
   sizes. Pin the italics to a text optical size so they match the design. */
.landing-step__title,
.landing-timeline__cell,
.landing-plan__name,
.landing-plans__more {
  font-variation-settings: "opsz" 18;
}