/* The Heart Garden (tools/garden.html). Prefix gd-. See assets/js/garden.js */
.gd-hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center}
.gd-hero-art{width:100%;max-width:380px;height:auto;margin-left:auto;border-radius:28px;filter:drop-shadow(0 16px 20px rgba(43,33,64,.16))}
.gd-hero{padding-bottom:30px}
@media (max-width:820px){.gd-hero-in{grid-template-columns:1fr;gap:10px}.gd-hero-art{max-width:240px;margin:0 auto}}

.gd-sec{padding:34px 0 70px}
.gd-nojs{max-width:640px;margin:0 auto;background:#fff;border-radius:var(--r-l);padding:30px 34px;box-shadow:var(--sh-1)}
html:not(.no-js) .gd-nojs{display:none}
.gd-app{max-width:980px;margin:0 auto}
.gd-app[hidden]{display:none}
.gd-scene{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2);background:#DCEAF6;border:4px solid #fff}
.gd-scene svg{display:block;width:100%;height:auto}
.gd-count{position:absolute;left:16px;top:14px;margin:0;padding:8px 16px;border-radius:99px;background:rgba(255,255,255,.92);font:800 .9rem/1.3 var(--f-body);color:var(--ink);box-shadow:0 3px 12px rgba(43,33,64,.14);max-width:calc(100% - 32px)}
.gd-say{margin:18px auto 6px;max-width:700px;text-align:center;font:italic 600 1.3rem/1.45 var(--f-serif);color:var(--ink);min-height:2.9em}

.gd-plots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:14px 0 0}
.gd-plot{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:18px 18px 16px 24px;border-radius:var(--r-m);background:#fff;border:2px solid var(--line);cursor:pointer;
  font:inherit;color:var(--ink);box-shadow:var(--sh-1);transition:transform .25s,box-shadow .25s,border-color .25s}
.gd-plot::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:7px;border-radius:0 6px 6px 0;background:var(--pc)}
.gd-plot:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(43,33,64,.14)}
.gd-plot[aria-expanded="true"]{border-color:var(--pc);box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 22%,transparent),var(--sh-1)}
.gd-dot{position:absolute;right:16px;top:16px;width:18px;height:18px;border-radius:50%;background:var(--pc);box-shadow:0 0 0 4px color-mix(in srgb,var(--pc) 22%,transparent)}
.gd-pn{font:600 1.12rem/1.2 var(--f-head);padding-right:30px}
.gd-pq{font:italic 600 1rem/1.35 var(--f-serif);color:var(--ink-2)}
.gd-stage{margin-top:4px;font:800 .8rem/1.3 var(--f-body);letter-spacing:.04em;color:var(--leaf-d)}
.gd-cta{margin-top:6px;font:800 .9rem/1 var(--f-body);color:var(--coral-d);text-decoration:underline;text-underline-offset:4px}
@media (max-width:860px){.gd-plots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.gd-plots{grid-template-columns:1fr}}

.gd-prac{margin:18px 0 0}
.gd-prac[hidden]{display:none}
.gd-pp{background:#fff;border-radius:var(--r-l);padding:24px 28px;box-shadow:var(--sh-2);border-top:7px solid var(--pc)}
.gd-pp h3{margin:0 0 4px}
.gd-pp-sub{margin:0 0 14px;color:var(--ink-2)}
.gd-pp ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gd-pp li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border-radius:var(--r-s);background:var(--cream)}
.gd-pp li span{font-weight:700}
.gd-do{flex:none;padding:10px 18px;min-height:44px}
@media (max-width:560px){.gd-pp li{flex-direction:column;align-items:stretch;text-align:left}.gd-do{width:100%}}

.gd-tools{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center;margin:22px 0 4px}
.gd-fine{text-align:center;font-size:.92rem;color:var(--ink-3);margin:6px auto 0;max-width:620px}

.gd-why{padding:70px 0}
.gd-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:820px){.gd-facts{grid-template-columns:1fr}}
.gd-grown{max-width:760px;margin:34px auto 0;padding:24px 28px;background:#fff;border-radius:var(--r-l);box-shadow:var(--sh-1);border:2px dashed var(--line)}
.gd-grown h3{margin:0 0 6px}.gd-grown p{margin:0}

/* the garden itself */
.gd-plant .gd-grow{transform-origin:0 0}
.gd-plant.pop .gd-grow{animation:gdPop .9s cubic-bezier(.3,1.6,.5,1)}
@keyframes gdPop{0%{transform:scale(.5);opacity:.4}100%{transform:scale(1);opacity:1}}
.gd-drops circle{fill:#7DB7E8;animation:gdDrop 1.1s ease-in forwards;opacity:0}
@keyframes gdDrop{0%{opacity:0;transform:translateY(-60px)}20%{opacity:1}100%{opacity:0;transform:translateY(56px)}}
.gd-can{animation:gdCan 1.2s ease-in-out forwards}
@keyframes gdCan{0%{opacity:0;transform:translate(24px,-20px) rotate(0)}25%,75%{opacity:1;transform:translate(0,0) rotate(-22deg)}100%{opacity:0;transform:translate(24px,-20px) rotate(0)}}
.gd-fly{animation:gdFly 14s ease-in-out infinite}
@keyframes gdFly{0%,100%{transform:translate(0,0)}25%{transform:translate(120px,-40px)}50%{transform:translate(230px,20px)}75%{transform:translate(90px,50px)}}
.gd-wing{transform-origin:0 0;animation:gdFlap .5s ease-in-out infinite alternate}
@keyframes gdFlap{from{transform:scaleX(1)}to{transform:scaleX(.35)}}
.gd-bee{animation:gdBee 9s ease-in-out infinite}
@keyframes gdBee{0%,100%{transform:translate(0,0)}33%{transform:translate(-90px,-26px)}66%{transform:translate(40px,16px)}}
.gd-bird{animation:gdBird 26s linear infinite}
@keyframes gdBird{0%{transform:translate(-80px,0)}100%{transform:translate(1040px,-30px)}}
.gd-ff{animation:gdFf 3.2s ease-in-out infinite}
@keyframes gdFf{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-10px)}}
.gd-spark{animation:gdSpark 2.4s ease-in-out infinite}
@keyframes gdSpark{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}
@media (prefers-reduced-motion:reduce){.gd-plant.pop .gd-grow,.gd-fly,.gd-wing,.gd-bee,.gd-bird,.gd-ff,.gd-spark,.gd-plot,.gd-can,.gd-drops circle{animation:none!important;transition:none!important}.gd-drops circle{opacity:.8}}
@media print{.gd-tools,.gd-plots,.gd-prac{display:none}}

.gd-link{font:800 .95rem/1.2 var(--f-body);background:none;border:0;color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;padding:12px 10px;min-height:44px;cursor:pointer}
.gd-link:hover{color:var(--ink)}