/* ==========================================================================
   Lawn Leads homepage only (index.html). Loads after css/core.css and css/lawn.css.
   Everything reusable lives in css/lawn.css; this file holds the homepage's own art
   (the hero route map, the shared-lead fan of phones) and its section spacing.
   ========================================================================== */

/* ==========================================================================
   1. Hero: the route map on a clipboard
   ========================================================================== */
.hm-hero { padding: clamp(18px, 3.4vw, 44px) 0 clamp(72px, 8vw, 104px); }
.hm-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.hm-hero .fc-h1 { margin-bottom: 20px; }
.hm-hero__sub {
  max-width: 34em;
  margin-bottom: 26px;
  font-size: clamp(1.0625rem, 1rem + 0.32vw, 1.25rem);
  line-height: 1.55;
  color: var(--fc-ink-2);
}
.hm-hero__what { font-weight: 600; color: var(--fc-ink); }
.hm-hero__after {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 18px;
}
.hm-hero__art {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 26px 0 12px;
}
.hm-hero .fc-board__paper { padding: 26px 12px 8px; }

.fc-map text { font-family: var(--fc-body); }

.hm-plus {
  font-family: var(--fc-hand);
  font-size: 14px;
  fill: var(--fc-orange-ink);
  opacity: 0;
  pointer-events: none;
}
.fc-lot.is-fresh .hm-plus { animation: hm-plus 1.2s var(--fc-ease) 0.3s both; }
@keyframes hm-plus {
  0% { opacity: 0; transform: translateY(6px); }
  25% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-14px); }
}
.hm-heart__pop {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scale(0);
  transition: transform 0.8s var(--fc-bounce);
}
.fc-lot.is-heart .hm-heart__pop { transform: scale(1); }

.hm-route { fill: none; stroke: var(--fc-orange); stroke-width: 2.8; stroke-linecap: round; stroke-dasharray: 0.1 7; }

.hm-mower { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hm-mower__body { transform-box: fill-box; transform-origin: 50% 50%; }
.hm-mower__shadow { fill: var(--fc-ink); opacity: 0.16; }
.hm-mower__tire { fill: var(--fc-ink); }
.hm-mower__chute { fill: var(--fc-orange); stroke: var(--fc-ink); stroke-width: 1.3; }
.hm-mower__deck { fill: var(--fc-orange); stroke: var(--fc-ink); stroke-width: 1.7; }
.hm-mower__shine { fill: none; stroke: #FFE1CF; stroke-width: 1.5; stroke-linecap: round; }
.hm-mower__frame { fill: var(--fc-clover-2); stroke: var(--fc-ink); stroke-width: 1.7; }
.hm-mower__engine { fill: var(--fc-sun); stroke: var(--fc-ink); stroke-width: 1.2; }
.hm-mower__seat { fill: var(--fc-ink); }
.hm-mower__bars { fill: none; stroke: var(--fc-ink); stroke-width: 2; stroke-linecap: round; }
.hm-mower__bits path { stroke: var(--fc-lawn-b); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.hm-mower__hit { fill: transparent; pointer-events: all; }
.fc-map.is-driving .hm-mower__body { animation: hm-rumble 0.14s steps(2) infinite; }
.fc-map.is-driving .hm-mower__bits path { animation: hm-bits 0.45s linear infinite; }
.fc-map.is-driving .hm-mower__bits path:nth-child(2) { animation-delay: -0.12s; }
.fc-map.is-driving .hm-mower__bits path:nth-child(3) { animation-delay: -0.25s; }
.fc-map.is-driving .hm-mower__bits path:nth-child(4) { animation-delay: -0.35s; }
.hm-mower__body.is-bump { animation: hm-bump 0.32s var(--fc-bounce); }
.hm-mower__body.is-wheelie { animation: hm-wheelie 1.6s var(--fc-ease); }
@keyframes hm-rumble { 50% { transform: translate(0.4px, -0.4px); } }
@keyframes hm-bits {
  0% { opacity: 1; transform: translate(0, 0); }
  100% { opacity: 0; transform: translate(-9px, 8px); }
}
@keyframes hm-bump { 45% { transform: scale(1.16) rotate(-7deg); } }
@keyframes hm-wheelie {
  0% { transform: none; }
  22% { transform: translate(-3px, -9px) scale(1.5) rotate(-26deg); }
  62% { transform: translate(-2px, -8px) scale(1.45) rotate(-18deg); }
  82% { transform: scale(0.94) rotate(3deg); }
  100% { transform: none; }
}

/* the green marker that striped the lawns, left on the board */
.hm-marker {
  position: absolute;
  left: 18px;
  bottom: -34px;
  z-index: 5;
  width: 178px;
  height: auto;
  transform: rotate(-3deg) scaleX(-1);
  transition: transform 0.4s var(--fc-bounce);
  pointer-events: none;
}
@media (max-width: 999px) {
  .hm-marker { left: auto; right: 10px; bottom: -26px; width: 140px; transform: rotate(4deg) scaleX(-1); }
}
@media (max-width: 600px) {
  .hm-marker { display: none; }
}

/* counter sticker + sticky note */
.hm-tally {
  position: absolute;
  top: -24px;
  right: -22px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 12px;
  border: var(--fc-line);
  border-radius: var(--fc-r2);
  background: var(--fc-white);
  box-shadow: var(--fc-chunk);
  transform: rotate(3.5deg);
}
.hm-tally__flag { flex: none; width: 18px; height: 24px; }
.hm-tally__label { max-width: 7.2em; font-size: 0.875rem; font-weight: 800; line-height: 1.15; }
.hm-tally__num {
  display: grid;
  place-items: center;
  min-width: 1.75em;
  padding: 7px 6px 4px;
  border-radius: 12px;
  background: var(--fc-ink);
  color: var(--fc-sun);
  font-family: var(--fc-display);
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1;
}
.hm-tally__num.is-bump { animation: hm-pop 0.36s var(--fc-bounce); }
@keyframes hm-pop { 40% { transform: scale(1.28) rotate(-6deg); } }

.hm-note {
  position: absolute;
  right: 0;
  bottom: 30px;
  z-index: 4;
}
.hm-note span { display: block; white-space: nowrap; }
.hm-note__arrow {
  position: absolute;
  top: 30px;
  right: -52px;
  width: 50px;
  height: 30px;
  transform: rotate(12deg);
}
.fc-board.is-done .hm-note__arrow { animation: hm-nudge 0.5s var(--fc-ease) 2; }
@keyframes hm-nudge { 50% { transform: translateX(7px) rotate(12deg); } }

@media (min-width: 1000px) {
  .hm-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: min(calc(100svh - var(--fc-header-h) - 2px), 980px);
  }
  .hm-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    grid-template-areas: "art copy";
    align-items: center;
    gap: clamp(48px, 5vw, 84px);
  }
  .hm-hero__copy { grid-area: copy; }
  .hm-hero__art { grid-area: art; justify-content: flex-start; }
}
@media (max-width: 999px) {
  .hm-hero__art { padding-top: 34px; }
  .hm-tally { top: auto; bottom: -24px; right: auto; left: -8px; transform: rotate(-3deg); }
  .hm-note { top: -38px; right: -6px; bottom: auto; padding: 16px 13px 12px; font-size: 0.98rem; transform: rotate(5deg); }
  .hm-note__arrow { display: none; }
}
@media (max-width: 600px) {
  .hm-hero { padding-top: 16px; }
  .hm-hero .fc-h1 { margin-bottom: 14px; }
  .hm-hero__sub { margin-bottom: 18px; }
  .hm-hero__after { margin-top: 14px; gap: 10px 16px; }
  .hm-hero__after .btn-ghost { min-height: 46px; }
  .hm-hero__art { padding: 74px 4px 34px; }
  .hm-hero .fc-board__paper { padding: 18px 6px 4px; transform: rotate(1.1deg); }
  .hm-tally { gap: 8px; padding: 6px 6px 6px 10px; }
  .hm-tally__label { font-size: 0.8rem; }
  .hm-tally__num { font-size: 1.7rem; }
  .hm-note { font-size: 0.9rem; }
}
/* ==========================================================================
   2. Trust: the caution tape pulls up over the hero's bottom edge
   ========================================================================== */
.hm-trust { padding: 0 0 10px; }
.hm-trust .fc-tape { margin: -34px 0 clamp(52px, 6vw, 84px); }
@media (min-width: 1000px) { .hm-trust .fc-tape { margin-top: 14px; } }
.hm-trust__head {
  display: grid;
  gap: 14px;
  justify-items: center;
  max-width: 760px;
  margin: 0 auto clamp(40px, 5vw, 60px);
  text-align: center;
}
@media (max-width: 360px) { .hm-trust__head .fc-nowrap { white-space: normal; } }

/* ==========================================================================
   3. The shared-lead trap: one lead, five phones
   ========================================================================== */
.hm-trap { padding: var(--fc-pad-y) 0 calc(var(--fc-fringe-h) + var(--fc-pad-y) * 0.7); }
.hm-trap__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.hm-trap__h { max-width: 15em; }
@media (min-width: 960px) {
  .hm-trap__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas: "h art" "copy art";
    grid-template-rows: auto 1fr;
    column-gap: clamp(40px, 5vw, 80px);
    row-gap: 28px;
  }
  .hm-trap__h { grid-area: h; align-self: end; }
  .hm-trap__art { grid-area: art; align-self: center; }
  .hm-trap__copy { grid-area: copy; }
}
.hm-trap__art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 560px;
  padding: 20px 0 40px;
}
.hm-fan { position: absolute; inset: 0; display: grid; place-items: center; }
.hm-ghost {
  --r: 0deg;
  --x: 0px;
  position: absolute;
  width: 212px;
  height: 424px;
  border: var(--fc-line);
  border-radius: 36px;
  background: var(--case, var(--fc-clover));
  box-shadow: var(--fc-chunk);
  transform: translateX(var(--x)) rotate(var(--r));
  transform-origin: 50% 88%;
  transition: transform 0.9s var(--fc-bounce);
}
.hm-ghost::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: var(--fc-line);
  border-radius: 27px;
  background: repeating-linear-gradient(90deg, #2F7A45 0 30px, #286C3C 30px 60px);
}
.hm-ghost--1 { --case: #5E7FA8; --r: -24deg; --x: -76px; }
.hm-ghost--2 { --case: var(--fc-sun); --r: -12deg; --x: -40px; }
.hm-ghost--3 { --case: var(--fc-white); --r: 12deg; --x: 40px; }
.hm-ghost--4 { --case: #A9DB8F; --r: 24deg; --x: 76px; }
html.reveal-on .hm-trap__art:not(.in) .hm-ghost { --r: 0deg; --x: 0px; }
.hm-ghost__note {
  position: absolute;
  top: 58px;
  left: 20px;
  right: 20px;
  display: grid;
  gap: 5px;
  padding: 9px 10px 10px 30px;
  border: 1.5px solid var(--fc-ink);
  border-radius: 12px;
  background: rgba(255, 253, 246, 0.95);
}
/* the same alert again, drawn as bars: no half-cut words behind the front phone */
.hm-ghost__note b,
.hm-ghost__note em { display: block; height: 7px; border-radius: 4px; background: var(--fc-ink); opacity: 0.78; }
.hm-ghost__note .hm-ghost__short { width: 62%; }
.hm-ghost__note em { width: 74%; background: #C4521F; opacity: 1; }
.hm-ghost__note i {
  position: absolute;
  top: 8px;
  left: 7px;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--fc-ink);
  border-radius: 4px;
  background: var(--fc-orange);
}

.hm-reply {
  position: absolute;
  right: max(0px, calc(50% - 250px));
  bottom: 26px;
  z-index: 3;
  max-width: 14em;   /* two lines, so the -3deg object tilt stays in budget (house rule 1) */
  padding: 12px 16px;
  border: var(--fc-line);
  border-radius: 22px 22px 22px 6px;
  background: #E7EAE6;
  box-shadow: var(--fc-chunk);
  font-weight: 600;
  line-height: 1.35;
  transform: rotate(-3deg);
}
.hm-reply::before {
  content: "";
  position: absolute;
  left: -10px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  border-left: var(--fc-line);
  border-bottom: var(--fc-line);
  border-radius: 0 0 0 14px;
  background: #E7EAE6;
  clip-path: polygon(0 0, 100% 40%, 100% 100%, 0 100%);
}
.hm-trap__copy { position: relative; z-index: 3; display: grid; gap: 30px; align-content: start; max-width: 36em; }
@media (min-width: 960px) and (max-width: 1199px) {
  /* narrow art column: close the fan so no phone swings over the paragraph */
  .hm-trap__art { transform: scale(0.9); }
  .hm-ghost--1 { --r: -16deg; --x: -40px; }
  .hm-ghost--2 { --r: -8deg; --x: -22px; }
  .hm-ghost--3 { --r: 8deg; --x: 22px; }
  .hm-ghost--4 { --r: 16deg; --x: 40px; }
}
.hm-turn {
  position: relative;
  padding: 26px 26px 24px;
  border: var(--fc-line);
  border-radius: var(--fc-r2);
  background: var(--fc-white);
  box-shadow: var(--fc-chunk-lg);
  transform: rotate(-1deg);
}
.hm-turn__flag { position: absolute; top: -34px; right: 30px; width: 30px; height: 40px; }
.hm-turn__big {
  text-wrap: balance;
  margin-bottom: 10px;
  font-family: var(--fc-display);
  font-size: clamp(1.8rem, 1.2rem + 1.5vw, 2.5rem);
  line-height: 1.08;
}
.hm-turn p:last-child { font-size: 1.08rem; font-weight: 600; line-height: 1.5; }
@media (max-width: 600px) {
  .hm-trap__art { min-height: 470px; transform: scale(0.86); margin: -24px 0 -30px; }
  .hm-ghost--1 { --r: -12deg; --x: -30px; }
  .hm-ghost--2 { --r: -6deg; --x: -16px; }
  .hm-ghost--3 { --r: 6deg; --x: 16px; }
  .hm-ghost--4 { --r: 12deg; --x: 30px; }
  .hm-reply { right: 0; bottom: 18px; }
  .hm-turn { padding: 22px 18px 20px; }
}
/* ==========================================================================
   4. How it works, 5. Three ways, 6. The machine
   ========================================================================== */
.hm-how,
.hm-three,
.hm-machine { padding: var(--fc-pad-y) 0 calc(var(--fc-fringe-h) + var(--fc-pad-y)); }
.hm-reinforce {
  margin: clamp(56px, 7vw, 88px) auto 0;
  font-family: var(--fc-display);
  font-size: clamp(2.1rem, 1rem + 3.6vw, 4.2rem);
  line-height: 1.08;
  text-align: center;
  color: var(--fc-ink);
  text-shadow: 3px 3px 0 var(--fc-orange);
}
.hm-reinforce span { display: inline-block; }
.hm-reinforce span:last-child {
  padding-bottom: 0.1em;
  background: repeating-linear-gradient(90deg, var(--fc-lawn-a) 0 22px, var(--fc-lawn-b) 22px 44px) 0 100% / 100% 0.2em no-repeat;
}
.hm-three__h { max-width: 16em; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.hm-machine__h { max-width: 15em; margin: 0 auto clamp(36px, 5vw, 60px); text-align: center; }
.hm-close {
  max-width: 1000px;
  margin: clamp(56px, 7vw, 88px) auto 0;
  font-family: var(--fc-display);
  font-size: clamp(1.3rem, 0.95rem + 1.1vw, 1.95rem);
  line-height: 1.45;
  text-align: center;
}
.hm-close span { display: inline-block; margin: 0 0.15em; }
.hm-close span:nth-of-type(4)::after { display: none; }
.hm-close span::after {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 0.55em;
  margin-left: 0.35em;
  vertical-align: 0.08em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 16'%3E%3Cpath d='M2 9C10 5 20 5 30 8M23 2L31 8L24 14' fill='none' stroke='%23FF6B2C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hm-close .hm-bigstamp {
  display: inline-block;
  margin: 18px 0 0 0.2em;
  padding: 6px 22px 8px;
  border-width: 4px;
  border-radius: 12px;
  font-family: var(--fc-display);
  font-size: 1.5em;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  transform: rotate(-4deg);
  transition: transform 0.45s var(--fc-bounce) 0.3s, opacity 0.3s 0.3s;
}
html.reveal-on .hm-close:not(.in) .hm-bigstamp { opacity: 0; transform: scale(1.8) rotate(-4deg); }

/* ==========================================================================
   7. Who it's for: hangers on a rail, the sign nailed to the fence
   ========================================================================== */
.hm-who { padding: var(--fc-pad-y) 0 0; }
.hm-who__h { margin-bottom: clamp(32px, 4vw, 48px); text-align: center; }
.hm-filter { margin: clamp(56px, 7vw, 80px) auto -56px; }
@media (max-width: 600px) { .hm-filter { margin-bottom: -46px; } }

/* ==========================================================================
   8. Proof (the page's one deep turf band), 9. Team
   ========================================================================== */
.hm-proof { padding: clamp(56px, 7vw, 96px) 0 calc(30px + var(--fc-pad-y)); }
.hm-proof .fc-h2 { max-width: 15em; }
.hm-team { padding: var(--fc-pad-y) 0 calc(var(--fc-pad-y) + 8px); }
.hm-team__h { margin-bottom: clamp(56px, 6vw, 80px); text-align: center; }

/* Spec-sheet rows that ran 5 to 6 lines on phones (Jeff, 2026-09-28: "do what makes it look good on
   mobile"). Same words, split at a sentence: the follow-on sentence sits tight under the lead, and the
   VIP perks read as a short checklist with the kit's blade bullets. */
.fc-part .fc-part__more { margin-top: 4px; }
.fc-part__perks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.fc-part__perks li {
  position: relative; padding-left: 22px; font-size: 1rem; line-height: 1.45; color: var(--fc-ink-2);
}
.fc-part__perks li::before {
  content: ""; position: absolute; left: 2px; top: 0.42em; width: 12px; height: 12px; border-radius: 3px;
  background: var(--fc-clover); border: 2px solid var(--fc-ink); transform: rotate(45deg) scale(0.8);
}
@media (max-width: 640px) { .fc-part__perks li { font-size: 0.975rem; } }

/* ==========================================================================
   Labels and targets (2026-09-28 sweep)
   ========================================================================== */
/* Sample tags on the two drawn scenes (house rule: every drawn example wears one). The hero's sits
   on the clipboard's free top-left corner, clear of the clip, the tally and the sticky note. */
.hm-hero .fc-sample--pin { top: -14px; right: auto; left: 22px; }
@media (max-width: 600px) { .hm-hero .fc-sample--pin { top: -12px; left: 14px; } }
/* the multi-location card's 50+ is a Pawn Leads number: its chip leads the sentence */
#who .fc-proofchip { margin-right: 2px; vertical-align: 1px; }
/* spec-sheet part links: the kit's .fc-part h4 a carries the 44px targets (css/lawn.css) */