/* FarmSend homepage (v27). Everything here is scoped to .fs-home / .fsh so it can't leak into the app page. */

/* ---------- Buttons ---------- */
.fs-home .fs-btn,
body:has(.fs-home) .site-nav nav a.button.button-small {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 22px; border: 2px solid var(--green); border-radius: 12px;
  font: inherit; font-size: 16px; font-weight: 750; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.fs-home .fs-btn i { font-size: 18px; line-height: 1; }
.fs-home .fs-btn-primary {
  background: var(--green); color: #fff;
  box-shadow: 0 1px 2px rgba(15,102,55,.25), 0 6px 16px rgba(22,128,70,.22);
}
.fs-home .fs-btn-primary:hover {
  background: var(--green-dark); border-color: var(--green-dark); color: #fff;
  transform: translateY(-2px); box-shadow: 0 2px 4px rgba(15,102,55,.25), 0 12px 26px rgba(22,128,70,.3);
}
.fs-home .fs-btn-secondary,
body:has(.fs-home) .site-nav nav a.button.button-small {
  background: #fff; color: var(--green-dark) !important; box-shadow: 0 1px 2px rgba(23,35,28,.08);
}
.fs-home .fs-btn-secondary:hover,
body:has(.fs-home) .site-nav nav a.button.button-small:hover {
  background: #edf8f1; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(22,128,70,.16);
}
body:has(.fs-home) .site-nav nav a.button.button-small { min-height: 44px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.fs-home .fs-btn:active, body:has(.fs-home) .site-nav nav a.button.button-small:active { transform: translateY(0); }
.fs-home .fs-btn:focus-visible,
body:has(.fs-home) .site-nav nav a:focus-visible {
  outline: 3px solid #0b4f2a; outline-offset: 3px;
}
.fs-home .cta-panel .fs-btn:focus-visible { outline-color: #9be3b6; }
.fs-home .cta-panel .fs-btn { flex-shrink: 0; }

/* ---------- Section heading for the value cards ---------- */
.fs-home .fs-why-heading { max-width: 880px; }
.fs-home .fs-why-heading h2 { text-wrap: balance; }

/* ---------- Hero visual ---------- */
.fsh { position: relative; width: 100%; max-width: 560px; margin: 0 auto; --fsh-loop: 10s; }
.fsh-map {
  position: relative; border: 1px solid rgba(23,35,28,.1); border-radius: 18px; background: #fff;
  padding: 8px; box-shadow: 0 24px 60px rgba(28,62,41,.14);
}
.fsh-map-svg { display: block; width: 100%; height: auto; border-radius: 14px; }
.fsh-map-label, .fsh-example {
  padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.95); color: #425148;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.fsh-map-label { position: absolute; top: 18px; left: 18px; z-index: 2; box-shadow: 0 2px 8px rgba(22,44,29,.15); }
.fsh-road { fill: none; stroke: #fff; stroke-width: 7; }
.fsh-creek { fill: none; stroke: #b7d5e4; stroke-width: 5; stroke-linecap: round; }
.fsh-adj rect { fill: rgba(22,128,70,.16); }
.fsh-subject { fill: rgba(22,128,70,.42); stroke: #0f6637; stroke-width: 2.5; }
.fsh-ring { fill: none; stroke: #168046; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.fsh-ring-adj { stroke-width: 3; fill: rgba(22,128,70,.06); }
.fsh-ring-5 { stroke-dasharray: 8 6; }
.fsh-ring-15 { stroke-dasharray: 3 6; stroke: #2f8f59; }
.fsh-ring-label rect { fill: #fff; stroke: rgba(22,128,70,.35); }
.fsh-ring-label text { fill: #0f6637; font: 750 13px Inter, ui-sans-serif, system-ui, sans-serif; }
.fsh-pin { fill: #d9472b; transform-box: fill-box; transform-origin: 50% 100%; }
.fsh-pin-shadow { fill: rgba(23,35,28,.25); transform-box: fill-box; transform-origin: center; }

.fsh-list {
  position: relative; z-index: 3; width: min(360px, 88%); margin: -96px 0 0 auto;
  border: 1px solid rgba(23,35,28,.1); border-radius: 16px; background: #fff;
  box-shadow: 0 18px 44px rgba(28,62,41,.18); overflow: hidden;
}
.fsh-list-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 780;
}
.fsh-example { background: #fff6df; color: #8a5c00; }
.fsh-list ul { list-style: none; margin: 0; padding: 4px 0; }
.fsh-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 14px; }
.fsh-row + .fsh-row { border-top: 1px solid #eef2ef; }
.fsh-row-main { display: grid; gap: 2px; min-width: 0; }
.fsh-row-main strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsh-row-main span { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.fsh-tag { flex-shrink: 0; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 750; }
.fsh-tag-resident { background: #edf8f1; color: #0f6637; }
.fsh-tag-absentee { background: #eef1fb; color: #33468f; }
.fsh-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px 12px; border-top: 1px solid var(--line); background: #f8faf8;
}
.fsh-count {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 13px; border-radius: 999px;
  background: var(--green); color: #fff; font-size: 13px; font-weight: 700;
}
.fsh-count strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.fsh-csv { width: 26px; height: 30px; flex-shrink: 0; }

/* Timeline: one 10s loop. Base styles above are the FINAL frame, so reduced motion simply removes animation. */
@media (prefers-reduced-motion: no-preference) {
  .fsh-pin { animation: fsh-pin var(--fsh-loop) ease-out infinite both; }
  .fsh-pin-shadow { animation: fsh-pin-shadow var(--fsh-loop) ease-out infinite both; }
  .fsh-subject { animation: fsh-subject var(--fsh-loop) ease-out infinite both; }
  .fsh-adj, .fsh-l-adj { animation: fsh-fade-adj var(--fsh-loop) ease-out infinite both; }
  .fsh-ring-adj { animation: fsh-ring-adj var(--fsh-loop) ease-out infinite both; }
  .fsh-ring-5 { animation: fsh-ring-5 var(--fsh-loop) ease-out infinite both; }
  .fsh-l-5 { animation: fsh-fade-5 var(--fsh-loop) ease-out infinite both; }
  .fsh-ring-15 { animation: fsh-ring-15 var(--fsh-loop) ease-out infinite both; }
  .fsh-l-15 { animation: fsh-fade-15 var(--fsh-loop) ease-out infinite both; }
  .fsh-list { animation: fsh-list var(--fsh-loop) ease-out infinite both; }
  .fsh-row-1 { animation: fsh-row-1 var(--fsh-loop) ease-out infinite both; }
  .fsh-row-2 { animation: fsh-row-2 var(--fsh-loop) ease-out infinite both; }
  .fsh-row-3 { animation: fsh-row-3 var(--fsh-loop) ease-out infinite both; }
  .fsh-row-4 { animation: fsh-row-4 var(--fsh-loop) ease-out infinite both; }
  .fsh-row-5 { animation: fsh-row-5 var(--fsh-loop) ease-out infinite both; }
  .fsh-foot { animation: fsh-foot var(--fsh-loop) ease-out infinite both; }
}
@keyframes fsh-pin {
  0%, 3% { opacity: 0; transform: translateY(-120px); }
  9% { opacity: 1; transform: translateY(0); }
  11% { transform: translateY(-12px); }
  13%, 93% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: none; }
}
@keyframes fsh-pin-shadow {
  0%, 3% { opacity: 0; transform: scale(.3); }
  9%, 93% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; }
}
@keyframes fsh-subject { 0%, 11% { opacity: 0; } 15%, 93% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes fsh-fade-adj { 0%, 16% { opacity: 0; } 22%, 93% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes fsh-fade-5 { 0%, 25% { opacity: 0; } 31%, 93% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes fsh-fade-15 { 0%, 34% { opacity: 0; } 40%, 93% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes fsh-ring-adj { 0%, 15% { opacity: 0; transform: scale(.4); } 21%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes fsh-ring-5 { 0%, 23% { opacity: 0; transform: scale(.45); } 30%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes fsh-ring-15 { 0%, 32% { opacity: 0; transform: scale(.55); } 39%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes fsh-list { 0%, 40% { opacity: 0; transform: translateY(18px); } 45%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes fsh-row-1 { 0%, 45% { opacity: 0; transform: translateX(28px); } 49%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes fsh-row-2 { 0%, 49% { opacity: 0; transform: translateX(28px); } 53%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes fsh-row-3 { 0%, 53% { opacity: 0; transform: translateX(28px); } 57%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes fsh-row-4 { 0%, 57% { opacity: 0; transform: translateX(28px); } 61%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes fsh-row-5 { 0%, 61% { opacity: 0; transform: translateX(28px); } 65%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes fsh-foot { 0%, 67% { opacity: 0; transform: scale(.92); } 72%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }

@media (max-width: 800px) {
  .fsh-list { width: calc(100% - 20px); margin: -40px auto 0; }
  .fsh-map { padding: 6px; }
  .fsh-map-label { top: 14px; left: 14px; }
}
@media (max-width: 480px) {
  .fs-home .hero-actions .fs-btn { width: 100%; }
  body:has(.fs-home) .site-nav nav a.button.button-small { padding: 0 12px; font-size: 13px; }
}

/* ---------- Hero H1 line breaks ---------- */
/* Desktop: one span per line ("Pick a property. / Get every landowner / around it.").
   Size tracks the column width (~10em of room per line, ~10% headroom for wider system fonts). */
.fs-home .fs-hero-title { text-wrap: balance; }
@media (min-width: 801px) {
  .fs-home .fs-hero-title { font-size: min(58px, calc(6.4vw - 18px)); line-height: 1.02; }
  .fs-home .fs-hero-title span { display: block; text-wrap: balance; }
}
@media (max-width: 800px) {
  .fs-home .fs-hero-title { text-wrap: pretty; }
}