@import url('fonts.css'); /* self-hosted Inter + Sora */
/* ============================================================
   Za Gradinata — 2026 design system  (zg2.css)
   Parallel “new design” pages: v2/ hub + calculators and the
   visual dashboard. Light, airy, photo-rich; glass cards, big
   type, gradient accents, scroll reveals. No build step.
   ============================================================ */
@font-face{font-family:'Outfit';font-style:normal;font-weight:500 800;font-display:swap;
  src:url(fonts/outfit-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500 800;font-display:swap;
  src:url(fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --pine:#0b2a18; --fir:#14532d; --em:#22c55e; --em-deep:#16a34a;
  --lime:#a3e635; --lime-soft:#f0fbe0; --mint:#d8f3dc;
  --sun:#fbbf24; --sun-deep:#f59e0b; --sky:#38bdf8; --rose:#fb7185;
  --bg:#f4f6ef; --card:#ffffff; --glass:rgba(255,255,255,.72);
  --ink:#182b1f; --muted:#5d6f62;
  --line:rgba(11,42,24,.10); --line-2:rgba(11,42,24,.07);
  --sh-s:0 4px 14px rgba(11,42,24,.06),0 1px 3px rgba(11,42,24,.05);
  --sh-m:0 20px 45px -12px rgba(11,42,24,.16),0 6px 16px rgba(11,42,24,.06);
  --sh-l:0 40px 90px -20px rgba(11,42,24,.28);
  --glow:0 10px 34px rgba(34,197,94,.35);
  --r:18px; --r-lg:26px; --r-pill:999px;
  --disp:'Outfit','Sora','Inter',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;
  background:
    radial-gradient(900px 520px at 88% -6%,rgba(163,230,53,.20),transparent 60%),
    radial-gradient(760px 480px at -8% 12%,rgba(34,197,94,.13),transparent 55%),
    radial-gradient(700px 420px at 55% 110%,rgba(251,191,36,.12),transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--disp);color:var(--pine);line-height:1.08;margin:0;letter-spacing:-.022em}
.wrap{width:min(1560px,calc(100% - 40px));margin:0 auto}
.muted{color:var(--muted)}
.center{text-align:center}
.grad{background:linear-gradient(92deg,var(--em-deep),var(--lime) 85%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.grad-sun{background:linear-gradient(92deg,var(--sun-deep),var(--sun));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- scroll reveal / motion ---------- */
.rev{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.rev.in{opacity:1;transform:none}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.35)}50%{box-shadow:0 0 0 12px rgba(34,197,94,0)}}
@media(prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  *{animation:none!important}
  html{scroll-behavior:auto}
}

/* ---------- header (engine markup + v2 hub) ---------- */
.zg-header{position:sticky;top:0;z-index:50;background:rgba(246,248,240,.68);
  border-bottom:1px solid var(--line-2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.zg-header .wrap{display:flex;align-items:center;gap:18px;min-height:80px}
.zg-brand{display:inline-flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:800;font-size:1.35rem;color:var(--pine)}
.zg-brand .mark{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;color:#08210f;
  background:linear-gradient(140deg,var(--lime),var(--em));box-shadow:var(--glow)}
.zg-brand .mark svg{width:24px;height:24px}
.zg-nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.zg-nav a{padding:10px 17px;border-radius:var(--r-pill);font-weight:600;font-size:1rem;color:var(--ink);transition:.18s}
.zg-nav a:hover{background:var(--lime-soft);color:var(--pine)}
.zg-controls{display:flex;align-items:center;gap:8px}
.zg-seg{display:inline-flex;background:rgba(255,255,255,.8);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:3px;box-shadow:var(--sh-s)}
.zg-seg button{border:0;background:transparent;cursor:pointer;font:inherit;font-weight:700;font-size:.82rem;
  color:var(--fir);padding:7px 12px;border-radius:var(--r-pill);line-height:1;transition:.15s}
.zg-seg button.active{background:linear-gradient(140deg,var(--em-deep),var(--em));color:#fff;box-shadow:var(--sh-s)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  border:1px solid transparent;border-radius:var(--r-pill);font-family:var(--disp);font-weight:700;font-size:1rem;
  padding:14px 26px;min-height:52px;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px) scale(1.015)}
.btn:active{transform:translateY(0) scale(.99)}
.btn-primary{background:linear-gradient(140deg,var(--fir),var(--pine));color:#fff;box-shadow:0 16px 34px rgba(11,42,24,.30)}
.btn-leaf{background:linear-gradient(140deg,var(--em),#4ade80);color:#062e14;box-shadow:var(--glow)}
.btn-ghost{background:rgba(255,255,255,.85);border-color:var(--line);color:var(--pine);box-shadow:var(--sh-s)}
.btn-sun{background:linear-gradient(140deg,var(--sun-deep),var(--sun));color:#3b2402;box-shadow:0 12px 30px rgba(245,158,11,.35)}
.btn-sm{min-height:42px;padding:9px 16px;font-size:.87rem}
.btn-leaf::after{content:"→";display:inline-block;transition:transform .2s}
.btn-leaf:hover::after{transform:translateX(5px)}

/* ---------- eyebrow / kick ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.85);
  color:var(--fir);border:1px solid rgba(34,197,94,.30);border-radius:var(--r-pill);
  padding:7px 16px;font-weight:700;font-size:.83rem;box-shadow:var(--sh-s)}
.kick{display:inline-flex;align-items:center;gap:9px;color:var(--em-deep);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem}
.kick::before{content:"";width:26px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--lime),var(--em))}

/* ---------- sections ---------- */
.section{padding:80px 0}
.section-head{max-width:66ch;margin-bottom:42px}
.section-head h2{font-size:clamp(2.2rem,4.4vw,3.7rem);font-weight:800;margin-top:12px}
.section-head p{color:var(--muted);margin:14px 0 0;font-size:1.12rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ============================================================
   TOOL APP PAGES (engine.js markup)
   ============================================================ */
.tool-hero{padding:46px 0 6px}
.tool-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.tool-hero .eyebrow{grid-column:1;justify-self:start}
.tool-hero h1{font-size:clamp(2.3rem,4.8vw,3.9rem);font-weight:800;margin-top:16px;max-width:18ch;grid-column:1}
.tool-hero p{color:var(--muted);max-width:56ch;margin:16px 0 0;font-size:1.14rem;grid-column:1}
.tool-hero .wrap::after{content:"";grid-column:2;grid-row:1/4;min-height:400px;border-radius:30px;
  background-image:var(--hero-img,linear-gradient(140deg,var(--mint),var(--lime-soft)));
  background-size:cover;background-position:center;box-shadow:var(--sh-l);border:5px solid #fff}
body.t-soil{--hero-img:url(img/v2/sowing-seeds.jpg)}
body.t-irrigation{--hero-img:url(img/v2/seedling-drip.jpg)}
body.t-pavers{--hero-img:url(img/v2/paver-detail.jpg)}
body.t-lawn{--hero-img:url(img/v2/lawn-banner.jpg)}
body.t-pergola{--hero-img:url(img/v2/evening-terrace.jpg)}
body.t-lighting{--hero-img:url(img/v2/tile-night.jpg)}
body.t-plant-finder{--hero-img:url(img/v2/flower-path.jpg)}
body.t-calendar{--hero-img:url(img/v2/potting-bench.jpg)}

.app{display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:30px;align-items:start;padding:38px 0 40px}
.card{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-m);padding:28px}
.card h2{font-size:1.4rem}
.card .sub{color:var(--muted);font-size:.95rem;margin:4px 0 0}

/* form fields */
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px 16px;margin-top:16px}
.field{margin:0}
.field.wide{grid-column:1/-1}
.field>label{display:block;font-family:var(--disp);font-weight:600;font-size:.87rem;margin-bottom:7px;color:var(--fir)}
.input,select{width:100%;border:1.5px solid var(--line);border-radius:14px;min-height:48px;padding:10px 14px;
  font:inherit;color:var(--ink);background:#fbfcf8;transition:border-color .15s,box-shadow .15s,background .15s}
.input:focus,select:focus{outline:0;border-color:var(--em);box-shadow:0 0 0 4px rgba(34,197,94,.18);background:#fff}
.input-unit{position:relative}
.input-unit .u{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:700;font-size:.8rem;pointer-events:none}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cols-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.fseg{display:flex;gap:8px;flex-wrap:wrap}
.fseg button{flex:1;min-width:86px;border:1.5px solid var(--line);background:#fbfcf8;border-radius:14px;
  min-height:46px;padding:8px 10px;font:inherit;font-weight:700;font-size:.88rem;cursor:pointer;color:var(--fir);transition:.16s;
  display:flex;align-items:center;justify-content:center;gap:8px}
.fseg button:hover{border-color:rgba(34,197,94,.5);transform:translateY(-1px)}
.fseg button.active{background:linear-gradient(140deg,var(--lime-soft),#e6f9d8);border-color:var(--em);color:var(--pine);box-shadow:0 4px 14px rgba(34,197,94,.18)}
.fseg.has-ic button{flex-direction:column;gap:7px;min-height:82px;padding:12px 8px}
.fseg .si{width:30px;height:30px;color:var(--em-deep)}
.fseg button.active .si{color:var(--pine)}
.hint{font-size:.8rem;color:var(--muted);margin-top:6px;grid-column:1/-1}
.loc-sugg{position:absolute;top:100%;left:0;right:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-m);margin-top:4px;max-height:240px;overflow:auto;display:none}
.loc-sugg.open{display:block}
.loc-sugg button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line-2);background:none;padding:9px 12px;font:inherit;cursor:pointer;color:var(--ink)}
.loc-sugg button:last-child{border-bottom:0}
.loc-sugg button:hover{background:var(--lime-soft)}
.loc-sugg small{color:var(--muted);margin-left:4px}
.divider{height:1px;background:var(--line-2);margin:24px 0}

/* results column — static: no sticky, no inner scrollbar */
.app>aside{position:static}
.result-card{position:static;background:
  radial-gradient(360px 180px at 90% -20%,rgba(163,230,53,.18),transparent 60%),var(--card)}
.headline{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.headline .num{font-family:var(--disp);font-size:3.4rem;font-weight:800;line-height:1;
  background:linear-gradient(92deg,var(--em-deep),var(--lime) 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.headline .lab{color:var(--muted);font-weight:600}
.chips{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:18px}
.chip{border:1px solid var(--line-2);border-radius:16px;padding:13px 14px;background:var(--lime-soft);transition:transform .18s}
.chip:hover{transform:translateY(-3px)}
.chip:nth-child(3n+2){background:#fdf3d8}
.chip:nth-child(3n){background:#e3f2fd}
.chip strong{display:block;font-family:var(--disp);font-size:1.35rem;color:var(--pine);font-weight:800}
.chip span{font-size:.78rem;color:var(--muted)}

/* spec / shopping list */
.spec-title{font-size:1.08rem;margin-bottom:2px}
.spec-total{display:flex;justify-content:space-between;align-items:center;border:1px solid rgba(34,197,94,.28);
  background:linear-gradient(120deg,var(--lime-soft),#e9fbdb);border-radius:14px;padding:12px 15px;margin:10px 0 4px}
.spec-total b{font-family:var(--disp);color:var(--pine);font-size:1.2rem}
.spec-total span{font-size:.8rem;color:var(--muted)}
.spec-item{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;padding:13px 0;border-bottom:1px dashed var(--line-2)}
.spec-item:last-child{border-bottom:0}
.spec-qty{font-family:var(--disp);font-weight:800;color:#fff;font-size:.88rem;background:linear-gradient(140deg,var(--em-deep),var(--em));
  border-radius:12px;min-height:40px;display:grid;place-items:center;padding:2px 6px;text-align:center;box-shadow:0 6px 14px rgba(34,197,94,.25)}
.spec-name{font-weight:600;font-size:.93rem;line-height:1.3}
.spec-name small{display:block;color:var(--muted);font-weight:500;font-size:.78rem;margin-top:1px}
.spec-name .retail{display:inline-flex;align-items:center;gap:3px;font-weight:700;color:var(--fir)}
.spec-name .retail svg{width:13px;height:13px}
.spec-buy{text-align:right}
.spec-buy .tot{display:block;font-family:var(--disp);font-weight:800;color:var(--pine);font-size:1rem}
.spec-buy .each{display:block;font-size:.72rem;color:var(--muted);margin-bottom:5px}
.buy{display:inline-block;white-space:nowrap;background:linear-gradient(140deg,var(--sun-deep),var(--sun));color:#3b2402;
  border-radius:var(--r-pill);padding:8px 15px;font-weight:800;font-size:.78rem;border:0;cursor:pointer;transition:.18s;box-shadow:0 6px 16px rgba(245,158,11,.30)}
.buy:hover{transform:translateY(-2px)}

/* list output (plant finder / calendar) */
.list-out{display:grid;gap:12px;margin-top:6px}
.list-row{display:flex;gap:13px;align-items:flex-start;padding:15px;border:1px solid var(--line-2);border-radius:16px;background:#fbfcf8;transition:.18s}
.list-row:hover{border-color:rgba(34,197,94,.4);transform:translateX(4px)}
.list-row .dot{width:40px;height:40px;border-radius:12px;background:linear-gradient(140deg,var(--lime-soft),var(--mint));color:var(--pine);display:grid;place-items:center;flex:none;font-weight:800}
.list-row h4{font-size:1rem}
.list-row p{margin:3px 0 0;font-size:.88rem;color:var(--muted)}
.badge{display:inline-block;font-size:.72rem;font-weight:700;background:var(--lime-soft);border:1px solid rgba(34,197,94,.25);color:var(--fir);padding:2px 10px;border-radius:var(--r-pill);margin-right:6px}

/* lead / quote panel */
.lead{margin-top:20px;background:
  radial-gradient(280px 160px at 90% -10%,rgba(163,230,53,.25),transparent 60%),
  linear-gradient(150deg,var(--fir),var(--pine));color:#e7f5e9;
  border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-m)}
.lead h3{color:#fff;font-size:1.22rem}
.lead p{color:rgba(231,245,233,.82);font-size:.9rem;margin:6px 0 0}
.lead form{display:grid;gap:10px;margin-top:14px}
.lead .input{background:rgba(255,255,255,.96);border-color:transparent}
.lead .hp{position:absolute;left:-9999px}
.lead .ok{display:none;background:rgba(163,230,53,.2);border:1px solid var(--lime);border-radius:12px;padding:12px;margin-top:10px;font-weight:700;color:#fff}

/* prose / faq */
.prose{max-width:74ch}
.prose h2{font-size:1.5rem;margin:30px 0 8px}
.prose h3{font-size:1.12rem;margin:20px 0 4px}
.prose p{color:var(--ink);margin:0 0 12px}
.faq{border-top:1px solid var(--line-2);padding:16px 0}
.faq summary{font-weight:700;cursor:pointer;color:var(--pine);font-family:var(--disp)}
.faq p{margin:10px 0 0;color:var(--muted)}

/* footer */
.zg-footer{background:var(--pine);color:#cfe3d2;padding:52px 0 40px;margin-top:40px;border-radius:34px 34px 0 0}
.zg-footer .zg-brand{color:#fff}
.zg-footer .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:26px}
.zg-footer h5{font-family:var(--disp);color:var(--lime);font-size:.95rem;margin:0 0 10px;letter-spacing:.04em;text-transform:uppercase}
.zg-footer a{display:block;color:#b9d2bd;font-size:.92rem;padding:4px 0;transition:.15s}
.zg-footer a:hover{color:#fff;transform:translateX(3px)}
.zg-footer .muted{color:#8fae94}
.zg-footer .copy{color:#8fae94;font-size:.85rem;margin-top:26px;border-top:1px solid rgba(255,255,255,.10);padding-top:18px}

/* ============================================================
   V2 HUB (hand-crafted page)
   ============================================================ */
/* full-bleed photo hero — image spans the whole viewport width */
.v2hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:min(92vh,880px);padding:100px 0;color:#fff;
  background:linear-gradient(98deg,rgba(6,20,11,.86) 0%,rgba(6,20,11,.62) 38%,rgba(6,20,11,.18) 68%,rgba(6,20,11,.30) 100%),
  url(img/v2/hero-harvest.jpg) center/cover no-repeat}
.v2hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:52px;align-items:center}
.v2hero h1{color:#fff;font-size:clamp(3rem,6.4vw,5.6rem);font-weight:800;margin:22px 0 0;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.v2hero h1 .grad{background:linear-gradient(92deg,var(--lime),#d9f99d);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.v2hero .eyebrow{background:rgba(8,26,15,.55);border-color:rgba(163,230,53,.45);color:#d9f99d;backdrop-filter:blur(8px)}
.v2hero .lead{font-size:1.22rem;line-height:1.6;color:#eef7e4;font-weight:500;max-width:58ch;margin:26px 0 0;
  background:rgba(8,26,15,.52);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(163,230,53,.32);border-radius:22px;padding:20px 26px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.v2hero .lead b{color:var(--lime)}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:34px}
.heroStage{position:relative;display:grid;gap:18px;justify-items:end}
.fchip{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.9);border-radius:20px;padding:15px 22px;box-shadow:var(--sh-m);
  font-family:var(--disp);font-weight:700;font-size:1.02rem;color:var(--pine);animation:floaty 5.5s ease-in-out infinite}
.fchip .big{font-size:1.7rem;line-height:1}
.fchip small{display:block;font-family:var(--body);font-weight:500;color:var(--muted);font-size:.8rem}
.fchip.p1{animation-delay:.3s;margin-right:36px}
.fchip.p2{animation-delay:1.2s}
.fchip.p3{animation-delay:2s;margin-right:60px}
/* floating chips over band images */
.shot .fchip{position:absolute}
.shot .fchip.p1{top:-18px;left:-26px;margin:0}
.shot .fchip.p3{top:38%;right:-24px;margin:0}

/* stat strip */
.statStrip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.stat{background:var(--glass);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.85);border-radius:20px;
  padding:22px 24px;box-shadow:var(--sh-s);transition:transform .2s}
.stat:hover{transform:translateY(-4px)}
.stat b{display:block;font-family:var(--disp);font-weight:800;font-size:2.3rem;line-height:1;
  background:linear-gradient(92deg,var(--em-deep),var(--lime));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat span{color:var(--muted);font-size:.9rem;display:block;margin-top:7px}

/* flagship big cards */
.bigGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bigCard{position:relative;background:var(--card);border:1px solid var(--line-2);border-radius:28px;overflow:hidden;
  box-shadow:var(--sh-m);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.bigCard:hover{transform:translateY(-8px);box-shadow:var(--sh-l)}
.bigCard .ph{height:250px;overflow:hidden;position:relative}
.bigCard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.bigCard:hover .ph img{transform:scale(1.07)}
.bigCard .ph .tag{position:absolute;top:14px;right:14px;background:linear-gradient(140deg,var(--sun-deep),var(--sun));color:#3b2402;
  font-family:var(--disp);font-weight:800;font-size:.72rem;letter-spacing:.05em;padding:6px 12px;border-radius:var(--r-pill);box-shadow:var(--sh-s)}
.bigCard .bd{padding:24px 26px 26px;display:flex;flex-direction:column;gap:9px;flex:1}
.bigCard h3{font-size:1.5rem}
.bigCard p{color:var(--muted);font-size:1rem;margin:0;flex:1}
.bigCard .go{color:var(--em-deep);font-family:var(--disp);font-weight:700;display:inline-flex;gap:7px;align-items:center;transition:gap .2s}
.bigCard:hover .go{gap:13px}

/* calculator photo cards */
.toolGridX{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tcard{position:relative;background:var(--card);border:1px solid var(--line-2);border-radius:24px;overflow:hidden;
  box-shadow:var(--sh-s);display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--sh-m)}
.tcard .ph{height:172px;overflow:hidden}
.tcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.tcard:hover .ph img{transform:scale(1.08)}
.tcard .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#08210f;
  background:linear-gradient(140deg,var(--lime),var(--em));box-shadow:var(--glow);
  margin:-26px 0 0 20px;position:relative;border:3px solid #fff}
.tcard .ic svg{width:26px;height:26px}
.tcard .bd{padding:12px 20px 20px}
.tcard h3{font-size:1.18rem}
.tcard p{color:var(--muted);font-size:.92rem;margin:6px 0 0}

/* steps */
.stepStrip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{text-align:center;padding:26px 18px;background:var(--glass);border:1px solid rgba(255,255,255,.85);border-radius:22px;box-shadow:var(--sh-s)}
.step .n{width:52px;height:52px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--disp);font-weight:800;font-size:1.25rem;color:#08210f;
  background:linear-gradient(140deg,var(--lime),var(--em));box-shadow:var(--glow)}
.step h4{font-size:1.05rem}
.step p{color:var(--muted);font-size:.86rem;margin:7px 0 0}

/* split showcase bands */
.bandX{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;padding:34px 0}
.bandX.flip>.txt{order:2}
.bandX .shot{position:relative}
.bandX .shot img{border-radius:28px;box-shadow:var(--sh-l);border:6px solid #fff}
.bandX .shot .fchip{animation-duration:6s}
.bandX h3{font-size:clamp(1.6rem,3vw,2.3rem);margin-top:10px}
.bandX .txt p{color:var(--muted);margin:14px 0 0;font-size:1.02rem}
.bandX ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px}
.bandX li{display:flex;gap:11px;align-items:flex-start;font-size:.98rem}
.bandX li::before{content:"✓";flex:none;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
  background:var(--lime-soft);color:var(--em-deep);font-weight:800;font-size:.8rem;margin-top:1px}

/* dark quote band — pure gradient + glows (no photo, keeps every image unique) */
.nightBand{position:relative;color:#e7f5e9;border-radius:34px;overflow:hidden;padding:76px 30px;text-align:center;
  background:
    radial-gradient(560px 300px at 12% 0%,rgba(163,230,53,.16),transparent 60%),
    radial-gradient(620px 340px at 92% 100%,rgba(34,197,94,.20),transparent 60%),
    radial-gradient(420px 260px at 70% -10%,rgba(251,191,36,.12),transparent 60%),
    linear-gradient(150deg,#0d3018,var(--pine))}
.nightBand h2{color:#fff;font-size:clamp(2rem,3.8vw,3rem)}
.nightBand .q{max-width:62ch;margin:20px auto 0;font-family:var(--disp);font-weight:600;font-size:1.4rem;line-height:1.5;color:#fff}
.nightBand .q small{display:block;margin-top:12px;font-family:var(--body);font-weight:500;font-size:.9rem;color:rgba(231,245,233,.7)}

/* ---------- photo band injected inside tool pages ---------- */
.toolband{padding:8px 0 72px}
.toolband .inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0;align-items:stretch;
  border-radius:30px;overflow:hidden;box-shadow:var(--sh-m);background:var(--card);border:1px solid var(--line-2)}
.toolband .ph{min-height:320px;position:relative}
.toolband .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.toolband .bd{padding:40px 44px;display:flex;flex-direction:column;justify-content:center}
.toolband h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.toolband .tips{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.toolband .tips li{display:flex;gap:13px;align-items:flex-start;font-size:1.02rem;color:var(--ink)}
.toolband .tips li::before{content:"✓";flex:none;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  background:var(--lime-soft);color:var(--em-deep);font-weight:800;font-size:.85rem;margin-top:1px}
@media(max-width:900px){ .toolband .inner{grid-template-columns:1fr} .toolband .ph{min-height:220px} .toolband .bd{padding:28px 24px} }

/* ============================================================
   VISUAL DASHBOARD (dashboard-visual.html)
   ============================================================ */
.dv-hero{padding:48px 0 10px}
.dv-hero .top{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:28px;align-items:center}
.dv-hero h1{font-size:clamp(2.3rem,5vw,4rem);font-weight:800}
.dv-hero .sub{color:var(--muted);margin:12px 0 0;font-size:1.12rem;max-width:60ch}
.dv-heroPh{width:180px;height:150px;border-radius:24px;overflow:hidden;box-shadow:var(--sh-m);border:4px solid #fff}
.dv-heroPh img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){ .dv-hero .top{grid-template-columns:1fr} .dv-heroPh{display:none} }

/* photo strip bleeding to card edges */
.dv-ph{margin:-24px -24px 16px;height:120px;overflow:hidden;position:relative}
.dv-ph img{width:100%;height:100%;object-fit:cover}
.dv-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(255,255,255,.92))}

/* custom plant icon tiles (unique gradient per plant) */
.pico{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;flex:none;
  box-shadow:0 4px 10px rgba(11,42,24,.18);color:#fff}
.pico svg{width:20px;height:20px;display:block}
.pico.lg{width:52px;height:52px;border-radius:16px}
.pico.lg svg{width:30px;height:30px}
.pico.sm{width:24px;height:24px;border-radius:8px}
.pico.sm svg{width:15px;height:15px}
.dv-ctl{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.dv-ctl select{min-height:44px;border-radius:var(--r-pill);padding:8px 38px 8px 16px;font-weight:600;background:#fff;
  border:1.5px solid var(--line);appearance:auto}
.dv-ctl .zg-seg{background:#fff}
.dv-chips{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin:26px 0 8px}
.dv-chip{background:var(--glass);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.9);border-radius:20px;
  padding:15px 17px;box-shadow:var(--sh-s);display:flex;gap:12px;align-items:center;transition:transform .2s}
.dv-chip:hover{transform:translateY(-4px)}
.dv-chip .em{font-size:1.55rem;line-height:1}
.dv-chip b{display:block;font-family:var(--disp);font-weight:800;font-size:1.22rem;color:var(--pine);line-height:1.15}
.dv-chip span{font-size:.73rem;color:var(--muted);display:block}

.dv-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;padding:18px 0 40px;align-items:stretch}
.dv-card{background:var(--card);border:1px solid var(--line-2);border-radius:24px;box-shadow:var(--sh-m);padding:24px;position:relative;overflow:hidden}
.dv-card h3{font-size:1.08rem;display:flex;align-items:center;gap:9px;margin-bottom:4px}
.dv-card .sub{color:var(--muted);font-size:.84rem;margin:2px 0 12px}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}

/* score ring */
.dv-ring{display:flex;gap:20px;align-items:center}
.dv-ring svg{flex:none}
.dv-ring .track{stroke:var(--lime-soft)}
.dv-ring .val{stroke:url(#ringGrad);stroke-linecap:round;transition:stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1)}
.dv-ring .pct{font-family:var(--disp);font-weight:800;font-size:1.7rem;fill:var(--pine)}
.dv-ring .pctlab{font-size:.62rem;fill:var(--muted)}
.dv-ring .msg{font-size:.92rem;color:var(--muted)}
.dv-ring .msg b{color:var(--pine)}

/* mini plot */
.dv-beds{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dv-bed{border-radius:16px;padding:16px 10px;text-align:center;font-size:.88rem;font-weight:600;color:var(--pine);
  background:linear-gradient(160deg,var(--lime-soft),var(--mint));border:1px solid rgba(34,197,94,.22);transition:transform .18s;
  display:flex;flex-direction:column;align-items:center;gap:9px}
.dv-bed:hover{transform:scale(1.05)}

/* tasks */
.dv-task{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;cursor:pointer;transition:.15s;border:1px solid transparent}
.dv-task:hover{background:var(--lime-soft)}
.dv-task input{width:20px;height:20px;accent-color:var(--em-deep);flex:none}
.dv-task.done{opacity:.5;text-decoration:line-through}
.dv-task span{font-size:.93rem}

/* chips of crops — big per-plant emoji icons */
.dv-crops{display:flex;flex-wrap:wrap;gap:10px}
.dv-crop{display:inline-flex;align-items:center;gap:9px;background:#fbfcf8;border:1px solid var(--line-2);border-radius:14px;
  padding:8px 15px;font-size:.96rem;font-weight:600;color:var(--pine);transition:.16s}
.dv-crop:hover{border-color:var(--em);transform:translateY(-2px);box-shadow:var(--sh-s)}
.dv-crop .em{font-size:1.35rem;line-height:1}
.dv-bed .em{font-size:2.3rem;line-height:1}
.dv-tl .crop .em{font-size:1.15rem;line-height:1}
.dv-entry .em{font-size:1.15rem;line-height:1}

/* charts */
.dv-chart svg{width:100%;height:auto;display:block}
.dv-bar{fill:url(#barGrad);rx:6}
.dv-bar:hover{opacity:.85}
.dv-axis{font-size:10px;fill:var(--muted);font-family:var(--body)}
.dv-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:.8rem;color:var(--muted)}
.dv-legend i{display:inline-block;width:11px;height:11px;border-radius:4px;margin-right:6px;vertical-align:-1px}
.dv-note{font-size:.76rem;color:var(--muted);background:#fdf3d8;border:1px solid rgba(245,158,11,.3);border-radius:10px;padding:7px 11px;margin-top:12px;display:inline-block}

/* weather */
.dv-now{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.dv-now .t{font-family:var(--disp);font-weight:800;font-size:2.6rem;color:var(--pine);line-height:1}
.dv-now .em{font-size:2.4rem}
.dv-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.dv-day{border-radius:12px;padding:9px 4px;background:#fbfcf8;border:1px solid var(--line-2);font-size:.72rem;color:var(--muted)}
.dv-day b{display:block;color:var(--pine);font-size:.86rem}
.dv-day .em{font-size:1.15rem;display:block;margin:3px 0}
.dv-day .pr{color:var(--sky);font-weight:700}

/* pests */
.dv-pest{border:1px solid rgba(245,158,11,.35);background:#fffbf0;border-radius:16px;padding:13px 15px;margin-bottom:10px}
.dv-pest b{font-size:.93rem;color:var(--pine)}
.dv-pest .aff{font-size:.78rem;color:var(--muted)}
.dv-pest p{font-size:.84rem;margin:6px 0 0;color:var(--ink)}

/* season timeline (gantt) */
.dv-tl{display:grid;grid-template-columns:150px repeat(12,1fr);gap:6px 3px;align-items:center;font-size:.82rem}
.dv-tl .mh{text-align:center;color:var(--muted);font-weight:600;font-size:.72rem}
.dv-tl .mh.cur{color:var(--em-deep);font-weight:800}
.dv-tl .crop{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--pine);padding-right:6px;min-width:0}
.dv-tl .crop b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-tl .cell{height:24px;border-radius:7px;background:#f1f4ec}
.dv-tl .cell.cur{outline:2px solid rgba(34,197,94,.35)}
.dv-tl .cell.sow{background:linear-gradient(140deg,var(--em),#4ade80)}
.dv-tl .cell.harv{background:linear-gradient(140deg,var(--sun-deep),var(--sun))}
.dv-tl .cell.both{background:linear-gradient(90deg,var(--em) 50%,var(--sun) 50%)}

/* harvest log form */
.dv-logform{display:grid;grid-template-columns:1fr 76px auto;gap:8px;align-items:center;margin-bottom:12px}
.dv-entry{display:flex;justify-content:space-between;align-items:center;font-size:.86rem;border-bottom:1px dashed var(--line-2);padding:6px 0}
.dv-entry button{border:0;background:none;color:var(--rose);cursor:pointer;font-size:.9rem}

/* bottom feature strip */
.dv-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;padding:6px 0 50px}
.dv-tile{text-align:center;padding:18px 10px;border-radius:18px;background:var(--glass);border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--sh-s);font-size:.82rem;font-weight:600;color:var(--pine);transition:transform .2s}
.dv-tile:hover{transform:translateY(-4px)}
.dv-tile .em{display:block;font-size:1.7rem;margin-bottom:6px}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .toolGridX{grid-template-columns:repeat(2,1fr)}
  .bigGrid{grid-template-columns:1fr 1fr}
  .dv-chips{grid-template-columns:repeat(3,1fr)}
  .s3,.s4,.s5{grid-column:span 6}
  .s6,.s7,.s8{grid-column:span 12}
}
@media(max-width:900px){
  .v2hero{min-height:auto;padding:70px 0}
  .v2hero .wrap,.bandX{grid-template-columns:1fr;gap:34px}
  .heroStage{justify-items:start}
  .bandX.flip>.txt{order:0}
  .tool-hero .wrap{grid-template-columns:1fr}
  .tool-hero .wrap::after{grid-column:1;grid-row:auto;min-height:230px;margin-top:20px}
  .app{grid-template-columns:1fr}
  .app>aside{position:static;max-height:none;overflow:visible;padding:0;margin:0}
  .statStrip,.stepStrip{grid-template-columns:1fr 1fr}
  .zg-nav{display:none}
}
@media(max-width:600px){
  .toolGridX,.bigGrid,.statStrip,.stepStrip{grid-template-columns:1fr}
  .dv-chips{grid-template-columns:1fr 1fr}
  .s3,.s4,.s5,.s6,.s7,.s8{grid-column:span 12}
  .chips{grid-template-columns:1fr 1fr}
  .dv-strip{grid-template-columns:repeat(3,1fr)}
  .dv-tl{grid-template-columns:86px repeat(12,1fr)}
  .zg-footer .cols{grid-template-columns:1fr 1fr}
}

/* ---------- print ---------- */
@media print{
  .zg-header,.zg-footer,.tool-hero,.no-print,.loc-sugg,.lead{display:none!important}
  .app,.wrap{display:block!important;width:100%!important;margin:0!important}
  .result-card,.card{position:static!important;box-shadow:none!important;border:0!important}
  body{background:#fff!important}
  a[href]:after{content:""!important}
}