/* Public landing page (templates/public/index.html). Mobile-first, standalone of the purged Tailwind build. */
.lp{--night:#0f3d2e;--leaf:#2e7d4f;--leaf-l:#e8f3ec;--jute:#e9b949;--ink:#1c2a24;--ink-3:#5d6b64;
  background:#f6f8f5;color:var(--ink);min-height:100vh;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth}
.lp a{text-decoration:none}
.lp-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.6rem 1rem;padding-top:calc(.6rem + env(safe-area-inset-top));background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);border-bottom:1px solid #e3e9e5}
.lp-brand{display:flex;align-items:center;gap:.55rem;color:var(--night);font-weight:700;font-size:1.05rem;min-width:0}
.lp-brand img{height:2.4rem;width:auto}
.lp-brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-lang{display:inline-flex;align-items:center;gap:.35rem;min-height:2.5rem;padding:0 .8rem;border-radius:999px;
  border:1px solid #cfdcd4;background:#fff;color:var(--leaf);font-weight:700;font-size:.85rem;cursor:pointer}
.lp-lang svg{width:1rem;height:1rem}

/* Hero: photo slideshow (or the field illustration until photos are added) */
.lp-hero{position:relative;overflow:hidden;background:var(--night);color:#fff;min-height:min(78vh,38rem);
  display:flex;align-items:flex-end}
.lp-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,40,30,.94) 0%,rgba(10,40,30,.5) 50%,rgba(10,40,30,.1) 100%)}
.lp-slides{position:absolute;inset:0}
.lp-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:lp-slide 24s linear infinite;will-change:opacity,transform}
.lp-slide:nth-child(2){animation-delay:6s}
.lp-slide:nth-child(3){animation-delay:12s}
.lp-slide:nth-child(4){animation-delay:18s}
.lp-slide:only-child{opacity:1;animation:lp-zoom 20s ease-in-out infinite alternate}
.lp-hero-in{position:relative;z-index:1;width:100%;max-width:60rem;margin:0 auto;
  padding:3rem 1.25rem calc(2rem + env(safe-area-inset-bottom))}
.lp-hero-in>*{animation:lp-up .7s ease-out both}
.lp-hero-in>:nth-child(2){animation-delay:.12s}
.lp-hero-in>:nth-child(3){animation-delay:.24s}
.lp-hero h1{color:#fff;font-size:2rem;line-height:1.3;font-weight:800;margin:0;letter-spacing:-.01em}
.lp-tag{color:#dcefe3;font-size:1.05rem;line-height:1.55;margin:.75rem 0 1.5rem;max-width:34rem}
.lp-cta{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}

.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.1rem;padding:0 1.1rem;
  border-radius:.8rem;font-weight:700;font-size:1rem;transition:transform .1s,background .15s}
.lp-btn:active{transform:scale(.97)}
.lp-btn-main{background:var(--jute);color:var(--night)}
.lp-btn-main:hover{background:#f3cd6e}
.lp-btn-alt{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(4px)}
.lp-i{width:1.2rem;height:1.2rem}

.lp-sec{width:100%;max-width:60rem;margin:0 auto;padding:1.25rem 1rem 0}
.lp-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.lp-card{background:#fff;border:1px solid #e3e9e5;border-radius:1rem;padding:1rem;transition:transform .2s,box-shadow .2s}
.lp-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,61,46,.1)}
.lp-card h3{font-size:1rem;margin:.6rem 0 .2rem;color:var(--ink)}
.lp-card p{font-size:.85rem;color:var(--ink-3);margin:0}
.lp-ci{width:2.5rem;height:2.5rem;padding:.55rem;border-radius:.75rem;background:var(--leaf-l);color:var(--leaf)}

.lp-foot{width:100%;max-width:60rem;margin:auto auto 0;padding:1.5rem 1rem calc(1rem + env(safe-area-inset-bottom));
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1rem;font-size:.78rem;color:var(--ink-3)}
.lp-foot a{color:var(--leaf);font-weight:700}

@keyframes lp-slide{0%{opacity:0;transform:scale(1.12)}5%{opacity:1}25%{opacity:1}31%{opacity:0;transform:scale(1)}100%{opacity:0}}
@keyframes lp-zoom{from{transform:scale(1)}to{transform:scale(1.1)}}
@keyframes lp-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  .lp-card{animation:lp-up linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
}
@media (prefers-reduced-motion:reduce){
  .lp-slide,.lp-hero-in>*,.lp-card{animation:none!important}
  .lp-slide:first-child{opacity:1}
}

@media (max-width:359px){.lp-cta{grid-template-columns:1fr}.lp-hero h1{font-size:1.6rem}}
@media (min-width:768px){
  .lp-bar{padding-left:2rem;padding-right:2rem}
  .lp-hero-in{padding:5rem 2rem 4rem}
  .lp-hero h1{font-size:3rem;max-width:42rem}
  .lp-tag{font-size:1.2rem}
  .lp-cta{display:flex;flex-wrap:wrap}
  .lp-btn{padding:0 1.8rem}
  .lp-grid{grid-template-columns:repeat(4,1fr)}
  .lp-sec{padding:2.5rem 2rem 0}
}

/* Live field data (templates/public/_live.html, kept fresh by static/js/live.js) */
.lp-live{width:100%;max-width:60rem;margin:0 auto;padding:1.5rem 1rem 0}
.lp-live-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.5rem 1rem;margin-bottom:1rem}
.lp-live-head h2{display:flex;align-items:center;gap:.6rem;font-size:1.3rem;color:var(--night);margin:0}
.lp-live-sub{margin:.3rem 0 0;color:var(--ink-3);font-size:.875rem}
.lp-updated{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--ink-3)}
.lp-i-sm{width:1rem;height:1rem;flex-shrink:0}
.lp-pulse{position:relative;display:inline-block;width:.65rem;height:.65rem;border-radius:999px;background:#22c55e;flex-shrink:0}
.lp-pulse::after{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;animation:lp-ping 1.6s ease-out infinite}
@keyframes lp-ping{from{transform:scale(1);opacity:.75}to{transform:scale(2.8);opacity:0}}
.lp-live-link{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.1rem;color:#e8f5ec;font-weight:700;font-size:.95rem;
  text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.4)}
.lp-live-grid{display:grid;gap:1rem}
.lp-plot{background:#fff;border:1px solid #e3e9e5;border-top:4px solid #cfdcd4;border-radius:1.1rem;padding:1rem;
  box-shadow:0 1px 2px rgba(15,61,46,.03),0 10px 28px -22px rgba(15,61,46,.4)}
.lp-plot.level-red{border-top-color:#dc2626}
.lp-plot.level-amber{border-top-color:#d97706}
.lp-plot.level-green{border-top-color:#16a34a}
.lp-plot.level-blue{border-top-color:#2563eb}
.lp-plot-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.lp-plot-head h3{margin:0;font-size:1.15rem;color:var(--ink)}
.lp-plot-head p{margin:.2rem 0 0;font-size:.8rem;color:var(--ink-3)}
.lp-plot-nums{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:1rem 0 .85rem}
.lp-num{border-radius:.9rem;padding:.75rem .85rem}
.lp-num-water{background:#eaf3fd}
.lp-num-temp{background:#fdf0ea}
.lp-k{display:flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--ink-3)}
.lp-num strong{display:block;margin-top:.3rem;font-size:2rem;line-height:1.1}
.lp-num small{font-size:.95rem;font-weight:600;margin-left:.15rem;opacity:.75}
.lp-num-water strong{color:#1d5fae}
.lp-num-temp strong{color:#c2410c}
.lp-gauge{position:relative;height:.6rem;border-radius:999px;background:#e8eef0}
.lp-gauge-fill{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#93c5fd,#2a78d6);transition:width .6s ease}
.lp-gauge-mark{position:absolute;top:-.3rem;bottom:-.3rem;width:3px;margin-left:-1px;border-radius:2px;background:#dc2626}
.lp-rec{margin:.8rem 0 0;font-size:.9rem;line-height:1.6;color:var(--ink)}
.lp-chart-title{margin:1.1rem 0 .2rem;font-size:.8rem;font-weight:700;color:var(--ink-3)}
.lp-chart{min-height:210px}
.lp-chart-sm{min-height:150px}
.lp-plot-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.5rem;
  padding-top:.75rem;border-top:1px solid #eef2ef;font-size:.8rem;color:var(--ink-3)}
.lp-live-more{text-align:center;margin:1.25rem 0 0}
.lp-btn-dark{background:var(--night);color:#fff}
.lp-live-empty{display:flex;align-items:center;gap:.85rem;background:#fff;border:1px dashed #cfdcd4;border-radius:1rem;padding:1.25rem;color:var(--ink-3)}
.lp-live-empty p{margin:0}
.lp-live-page{flex:1;padding-bottom:1rem}
.lp-bar-actions{display:flex;align-items:center;gap:.5rem}
@media (min-width:768px){
  .lp-live{padding:2.5rem 2rem 0}
  .lp-live-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-live-grid:has(> :only-child){grid-template-columns:minmax(0,1fr)}
  .lp-chart{min-height:250px}
  .lp-chart-sm{min-height:170px}
}
@media (prefers-reduced-motion:reduce){.lp-pulse::after{animation:none}.lp-gauge-fill{transition:none}}

/* Live summary + latest readings */
.lp-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin:0 0 1rem}
.lp-stat{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:.4rem;background:#fff;border:1px solid #e3e9e5;
  border-radius:.9rem;padding:.7rem .8rem;color:var(--ink-3);font-size:.8rem;transition:transform .2s,box-shadow .2s}
.lp-stat strong{grid-column:1 / -1;font-size:1.35rem;color:var(--night);line-height:1.2;margin-top:.15rem;transition:color .3s}
.lp-stat:hover{transform:translateY(-2px);box-shadow:0 10px 22px -16px rgba(15,61,46,.45)}
.lp-readings{margin-top:1rem;background:#fff;border:1px solid #e3e9e5;border-radius:1.1rem;padding:1rem}
.lp-readings h3{display:flex;align-items:center;gap:.45rem;margin:0 0 .6rem;font-size:1rem;color:var(--night)}
.lp-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.lp-table{width:100%;border-collapse:collapse;font-size:.875rem}
.lp-table th{text-align:left;font-weight:700;color:var(--ink-3);font-size:.78rem;padding:.45rem .5rem;border-bottom:1px solid #e3e9e5;white-space:nowrap}
.lp-table td{padding:.5rem;border-bottom:1px solid #f0f3f1;white-space:nowrap}
.lp-table tbody tr{animation:lp-up .4s ease-out both}
.lp-table tbody tr:nth-child(2){animation-delay:.03s}
.lp-table tbody tr:nth-child(3){animation-delay:.06s}
.lp-table tbody tr:nth-child(n+4){animation-delay:.09s}
.lp-table tbody tr:hover{background:#f6faf7}
.lp-table td:nth-child(3){color:#1d5fae;font-weight:700}
.lp-table td:nth-child(4){color:#c2410c;font-weight:700}
.lp-bad td{color:#b42318!important;background:#fff5f4}
@media (min-width:768px){.lp-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.lp-stat strong{font-size:1.55rem}}
@media (prefers-reduced-motion:reduce){.lp-table tbody tr{animation:none}}

/* Header buttons, hero extras, photo features, app band, phone dock */
.lp-bar-login{display:inline-flex;align-items:center;gap:.4rem;min-height:2.5rem;padding:0 1rem;border-radius:999px;
  background:var(--night);color:#fff;font-weight:700;font-size:.875rem;transition:transform .15s,background .15s}
.lp-bar-login:hover{background:#174e3b}
.lp-bar-login:active{transform:scale(.96)}
.lp-bar-login svg,.lp-bar-actions .lp-lang svg{width:1rem;height:1rem}
@media (max-width:420px){.lp-bar-wide{display:none}.lp-brand span{font-size:.95rem}}
.lp-kicker{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .8rem;padding:.35rem .8rem;border-radius:999px;
  background:rgba(255,255,255,.14);backdrop-filter:blur(6px);color:#e8f5ec;font-size:.8rem;font-weight:700}
.lp-dots{position:absolute;z-index:2;left:50%;bottom:.9rem;display:flex;gap:.4rem;transform:translateX(-50%)}
.lp-dots span{width:.5rem;height:.5rem;border-radius:999px;background:rgba(255,255,255,.45);animation:lp-dot 24s linear infinite}
.lp-dots span:nth-child(2){animation-delay:6s}
.lp-dots span:nth-child(3){animation-delay:12s}
.lp-dots span:nth-child(4){animation-delay:18s}
@keyframes lp-dot{0%,24%{width:1.4rem;background:#fff}27%,100%{width:.5rem;background:rgba(255,255,255,.45)}}
.lp-btn-two{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2}
.lp-btn-two small{font-size:.7rem;font-weight:600;opacity:.8;margin-top:.1rem}
.lp-btn-ghost{background:#fff;color:var(--night);border:1px solid #cfdcd4}
.lp-sec-title{font-size:1.3rem;color:var(--night);margin:0 0 1rem}
.lp-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.lp-feature{overflow:hidden;background:#fff;border:1px solid #e3e9e5;border-radius:1rem;transition:transform .25s,box-shadow .25s}
.lp-feature img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s ease}
.lp-feature div{padding:.75rem .85rem .9rem}
.lp-feature h3{display:flex;align-items:center;gap:.4rem;margin:0 0 .25rem;font-size:.98rem;color:var(--ink)}
.lp-feature h3 svg{color:var(--leaf)}
.lp-feature p{margin:0;font-size:.82rem;line-height:1.5;color:var(--ink-3)}
.lp-feature:hover{transform:translateY(-4px);box-shadow:0 16px 32px -20px rgba(15,61,46,.5)}
.lp-feature:hover img{transform:scale(1.06)}
.lp-app{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.25rem;padding:1.25rem;border-radius:1.25rem;color:#fff;
  background:linear-gradient(120deg,rgba(15,61,46,.94),rgba(26,90,68,.88)),url("../img/hero/field-4-800.eab99081915d.webp") center/cover}
.lp-app-icon{width:4rem;height:4rem;border-radius:1rem;background:#fff;padding:.3rem;flex-shrink:0}
.lp-app>div{flex:1 1 15rem}
.lp-app h2{margin:0 0 .3rem;font-size:1.25rem;color:#fff}
.lp-app p{margin:0 0 .9rem;color:#d6ecdf;font-size:.9rem;line-height:1.55}
.lp-app-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.lp-dock{position:fixed;z-index:30;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
  padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-top:1px solid #e3e9e5;box-shadow:0 -6px 20px rgba(0,0,0,.07);animation:lp-dock-in .5s .4s ease-out both}
.lp-dock .lp-btn{min-height:2.9rem}
@keyframes lp-dock-in{from{transform:translateY(100%)}to{transform:none}}
.lp-has-dock{padding-bottom:calc(4.4rem + env(safe-area-inset-bottom))}
@media (min-width:768px){
  .lp-dock{display:none}
  .lp-has-dock{padding-bottom:0}
  .lp-features{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
  .lp-app{padding:1.75rem 2rem}
}
@media (max-width:359px){.lp-features{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.lp-dots span,.lp-dock{animation:none}.lp-feature img{transition:none}}

/* Hero v3: photo focus points for tall phone screens, deeper overlay, frosted text panel on phones */
.lp-slide-4{object-position:50% 62%}   /* potato rows with the field sensor */
.lp-slide-3{object-position:58% 50%}   /* potato plants, sensor station */
.lp-slide-1{object-position:24% 50%}   /* solar pump and control box */
.lp-slide-2{object-position:30% 55%}   /* sensor box and sprinklers */
.lp-hero::after{background:
  linear-gradient(180deg,rgba(6,30,22,.35) 0%,rgba(6,30,22,.08) 30%,rgba(6,30,22,.55) 62%,rgba(6,30,22,.94) 100%),
  radial-gradient(120% 80% at 50% 0%,transparent 55%,rgba(6,30,22,.35) 100%)}
.lp-hero h1,.lp-tag{text-shadow:0 2px 14px rgba(0,0,0,.35)}
.lp-hero h1{font-size:clamp(1.65rem,6.4vw,3rem);line-height:1.28}
.lp-tag{color:#e6f4ea}
@media (max-width:767px){
  .lp-hero{min-height:calc(100svh - 3.6rem - 4.6rem - env(safe-area-inset-bottom));max-height:46rem} /* header + bottom bar stay clear */
  .lp-hero-in{margin:0 .75rem calc(.75rem + env(safe-area-inset-bottom));width:auto;padding:1.15rem 1.1rem 1.2rem;
    border-radius:1.25rem;background:linear-gradient(180deg,rgba(10,42,31,.42),rgba(10,42,31,.72));
    border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 40px -20px rgba(0,0,0,.6);
    -webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15)}
  .lp-kicker{margin-bottom:.65rem}
  .lp-tag{margin:.6rem 0 1.1rem;font-size:1rem}
  .lp-live-link{margin-top:.9rem}
  .lp-dots{top:1rem;bottom:auto;left:auto;right:1rem;transform:none}
}
@media (min-width:768px){
  .lp-hero-in{padding-bottom:4.5rem}
  .lp-hero-in>.lp-kicker,.lp-hero-in>h1,.lp-hero-in>.lp-tag,.lp-hero-in>.lp-cta{max-width:44rem}
}
