/* TOADCHOO — one sneeze, every timeline. */

:root{
  --bg:#FBFDF7;
  --bg-soft:#F1F7E8;
  --paper:#FFFFFF;
  --ink:#22321B;
  --ink-soft:#5A6B52;
  --green:#57B33E;
  --green-deep:#357623;
  --green-dark:#24511A;
  --sky:#4D9FE8;
  --sky-pale:#DCEEFB;
  --pollen:#F2C14E;
  --red:#D8402C;
  --seed:#FFFFFF;
  --line:#DCE7D2;
  --radius:22px;
  --shadow:0 10px 30px rgba(34,50,27,.10);
  --disp:"Shantell Sans",cursive;
  --body:"Karla",sans-serif;
  --mono:"Chivo Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-deep)}
h1,h2,h3{font-family:var(--disp);line-height:1.12;margin:0 0 .4em}
h2{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:800}
h3{font-size:1.25rem;font-weight:700}
section{padding:90px 22px;max-width:1180px;margin:0 auto;scroll-margin-top:90px}
::selection{background:var(--green);color:#fff}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--bg-soft)}
::-webkit-scrollbar-thumb{background:var(--green);border-radius:8px;border:3px solid var(--bg-soft)}
/* --green is only 2.59:1 on the page background and vanishes on the green buttons;
   --green-dark clears 3:1 on every surface the ring lands on, sky included. */
:focus-visible{outline:3px solid var(--green-dark);outline-offset:3px;border-radius:6px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.kicker{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep);margin:0 0 .6em}
.section-head{text-align:center;max-width:720px;margin:0 auto 46px}
.section-sub{color:var(--ink-soft);margin:.4em auto 0;max-width:560px}

/* ---------- reveals ---------- */
.rev{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.3,1.1)}
.rev.in{opacity:1;transform:none}
body.shot .rev,body.motion-off .rev{opacity:1;transform:none;transition:none}

/* ---------- gust lean ---------- */
.gustable{transition:transform 1.6s ease}
body.gusting .gustable{transform:rotate(.5deg) translateX(4px)}
body.gusting #heroArt{transform:rotate(.8deg) translateX(7px)}

/* ---------- breeze progress ---------- */
#breezeBar{position:fixed;top:0;left:0;height:4px;width:100%;z-index:110;
  background:linear-gradient(90deg,var(--green),var(--sky));transform-origin:left;transform:scaleX(0)}

/* ---------- ambient canvas ---------- */
#fxCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:80;pointer-events:none}

/* ---------- preloader ---------- */
#preloader{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease}
#preloader.done{opacity:0;pointer-events:none}
.pre-inner{text-align:center}
.pre-line{font-family:var(--disp);font-weight:700;font-size:1.1rem;color:var(--ink-soft)}
#preloader.blessed .pre-line{color:var(--green-deep)}
body.loaded #preloader{display:none}

/* ---------- toasts ---------- */
#toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:150;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(92vw,480px)}
.toast{background:var(--ink);color:#fff;font-family:var(--disp);font-weight:500;font-size:.95rem;
  padding:10px 18px;border-radius:999px;box-shadow:var(--shadow);opacity:0;transform:translateY(12px);
  transition:opacity .3s,transform .3s;text-align:center;max-width:100%}
.toast.show{opacity:1;transform:none}

/* ---------- achoo overlay ---------- */
#achooOverlay{position:fixed;inset:0;z-index:160;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0}
#achooOverlay.on{opacity:1}
#achooWord{font-family:var(--disp);font-weight:800;font-size:clamp(3rem,14vw,11rem);color:var(--green-dark);
  transform:scale(.3) rotate(-6deg);transition:transform .18s cubic-bezier(.2,1.4,.4,1);text-shadow:4px 6px 0 rgba(242,193,78,.55)}
#achooOverlay.on #achooWord{transform:scale(1) rotate(-3deg)}
#achooOverlay.on #achooWord em,#achooWord .red{color:var(--red)}
/* the shake must NOT go on <body>: a transformed body becomes the containing block for
   every position:fixed child, which would drop the ACHOO overlay to the document midpoint. */
body.sneezing #nav,body.sneezing main,body.sneezing footer{animation:pageShake .55s linear}
@keyframes pageShake{
  0%,100%{transform:translate(0,0)}
  15%{transform:translate(-10px,4px) rotate(-.6deg)}
  30%{transform:translate(9px,-5px) rotate(.5deg)}
  45%{transform:translate(-7px,5px) rotate(-.4deg)}
  60%{transform:translate(6px,-3px) rotate(.3deg)}
  75%{transform:translate(-4px,2px)}
  90%{transform:translate(2px,-1px)}
}
body.motion-off.sneezing #nav,body.motion-off.sneezing main,body.motion-off.sneezing footer{animation:none}

/* ---------- frog context menu ---------- */
#frogMenu{position:fixed;z-index:170;background:var(--paper);border:2px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;min-width:200px}
#frogMenu[hidden]{display:none}
#frogMenu button{font-family:var(--disp);font-weight:500;font-size:.95rem;color:var(--ink);
  background:none;border:0;text-align:left;padding:9px 12px;border-radius:9px;cursor:pointer}
#frogMenu button:hover,#frogMenu button:focus-visible{background:var(--bg-soft);color:var(--green-dark)}

/* ---------- nav ---------- */
#nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:20px;
  padding:10px 22px;background:rgba(251,253,247,.94);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{border-radius:10px}
.brand-name{font-family:var(--disp);font-weight:800;font-size:1.15rem;letter-spacing:.02em}
#navLinks{display:flex;gap:20px;margin-left:auto}
#navLinks a{font-family:var(--disp);font-weight:500;font-size:.95rem;text-decoration:none;color:var(--ink);position:relative}
#navLinks a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:3px;background:var(--green);border-radius:3px;transition:right .25s ease}
#navLinks a:hover::after,#navLinks a:focus-visible::after{right:0}
.nav-right{display:flex;align-items:center;gap:12px}
#soundToggle{background:none;border:2px solid var(--line);border-radius:10px;font-size:1rem;padding:4px 8px;cursor:pointer}
#soundToggle[aria-pressed="true"]{border-color:var(--green);background:var(--bg-soft)}
#burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
#burger span{display:block;width:24px;height:3px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .25s}
#burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
#burger[aria-expanded="true"] span:nth-child(2){opacity:0}
#burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
#mobileMenu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);
  border-bottom:2px solid var(--line);padding:18px 22px;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
#mobileMenu.open{display:flex}
@media (min-width:761px){#mobileMenu.open{display:none}}
#mobileMenu a{font-family:var(--disp);font-weight:700;text-decoration:none;color:var(--ink);font-size:1.05rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:1rem;
  padding:12px 22px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px) rotate(-.5deg)}
.btn:active{transform:translateY(1px) scale(.98)}
/* white text needs --green-deep (5.6:1); --green only reaches 2.65:1 */
.btn-green{background:var(--green-deep);color:#fff;box-shadow:0 6px 0 var(--green-dark)}
.btn-green:hover{box-shadow:0 8px 0 var(--green-dark)}
.btn-green:active{box-shadow:0 2px 0 var(--green-dark)}
.btn-line{background:var(--paper);color:var(--ink);border:2px solid var(--line);box-shadow:0 5px 0 var(--line)}
.btn-line:active{box-shadow:0 1px 0 var(--line)}
.btn-nav{padding:8px 18px;font-size:.95rem}
.btn img{display:inline-block}

/* ---------- hero ---------- */
#hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:44px;align-items:center;padding-top:64px}
#wordmark{font-size:clamp(2.5rem,6.4vw,4.9rem);font-weight:800;color:var(--green-dark);margin:0 0 .1em;
  letter-spacing:.01em;white-space:nowrap}
#wordmark .wl{display:inline-block;transition:transform .3s ease}
#wordmark:hover .wl{transform:translateY(calc(var(--b,0)*-6px)) rotate(calc(var(--r,0)*4deg))}
.tagline{font-family:var(--disp);font-weight:700;font-size:clamp(1.2rem,2.4vw,1.7rem);color:var(--ink);margin:.1em 0 .5em}
.tagline em{color:var(--green-deep);font-style:italic}
.hero-sub{color:var(--ink-soft);max-width:480px}
.ca-row{margin:22px 0 16px}
.ca-pill{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.92rem;
  background:var(--paper);border:2px dashed var(--green);border-radius:999px;padding:10px 18px;cursor:pointer;color:var(--ink);
  transition:transform .15s ease,border-color .15s}
.ca-pill:hover{transform:scale(1.02);border-color:var(--green-dark)}
.ca-label{background:var(--green-deep);color:#fff;font-weight:500;border-radius:999px;padding:2px 10px;font-size:.8rem}
.ca-copy{opacity:.55}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
#hero .cta-row{gap:10px}
#hero .cta-row .btn{padding:11px 17px;font-size:.95rem}
.hero-tallies{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tally{font-family:var(--mono);font-size:.85rem;background:var(--bg-soft);border-radius:999px;padding:6px 14px}
.tally b{color:var(--green-deep)}
.tally-hint{font-family:var(--disp);font-size:.9rem;color:var(--ink-soft)}

#heroArt{position:relative;margin:0;border-radius:var(--radius);box-shadow:var(--shadow)}
/* .gustable's transition shorthand would otherwise wipe .rev's opacity leg on this element */
#heroArt.rev{transition:opacity .7s ease,transform 1.6s ease}
#heroArt img{border-radius:var(--radius);width:100%;height:auto;object-fit:cover;aspect-ratio:1150/591;object-position:left center}
#noseZone{position:absolute;left:17%;top:20%;width:15%;height:20%;border-radius:50%}
#noseZone.armed{outline:3px dashed rgba(255,255,255,.9);outline-offset:5px}
#dandyPot{position:absolute;right:6%;bottom:6%;width:78px;cursor:grab;touch-action:none;z-index:5;
  filter:drop-shadow(0 4px 8px rgba(34,50,27,.3))}
#dandyPot svg{display:block;width:100%;height:auto}
#dandyPot.dragging{cursor:grabbing}
#dandyPot .dandy-rays path{stroke:#fff;stroke-width:1.6;stroke-linecap:round}
#dandyPot .dandy-rays circle{fill:#fff}
#tickleBtn{position:absolute;right:14px;top:14px;background:rgba(255,255,255,.94);color:var(--ink);
  border:2px solid rgba(255,255,255,.6);font-size:.86rem;padding:8px 15px;box-shadow:0 3px 10px rgba(34,50,27,.18)}
#heroArt.tremble{animation:tremble .3s linear infinite}
@keyframes tremble{
  0%,100%{transform:translate(0,0)}25%{transform:translate(-2px,1px) rotate(-.3deg)}
  50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-1px) rotate(.3deg)}
}
.ah-chip{position:absolute;left:18%;top:8%;font-family:var(--disp);font-weight:800;color:#fff;
  font-size:clamp(1.4rem,3vw,2.4rem);text-shadow:2px 3px 0 rgba(34,50,27,.4);animation:ahPop .5s ease both}
@keyframes ahPop{from{opacity:0;transform:scale(.5) rotate(-8deg)}to{opacity:1;transform:scale(1)}}

/* ---------- marquee (plain band) ---------- */
#marquee{overflow:hidden;background:var(--green-dark);color:#EFF7E8;padding:13px 0;white-space:nowrap}
.mq-track{display:inline-flex;align-items:center;gap:34px;padding-right:34px;animation:mq 26s linear infinite;will-change:transform}
.mq-track span{font-family:var(--disp);font-weight:700;font-size:1.02rem;letter-spacing:.06em}
.mq-track i{font-style:normal;font-size:.85rem;opacity:.9}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
body.motion-off .mq-track{animation:none}

/* ---------- story ---------- */
.beats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.beat{position:relative;background:var(--paper);border:2px solid var(--line);border-radius:var(--radius);
  padding:34px 30px 26px;box-shadow:var(--shadow)}
.beat-no{position:absolute;top:-16px;left:22px;font-family:var(--disp);font-weight:800;font-size:1rem;
  background:var(--green-deep);color:#fff;border-radius:999px;padding:4px 14px}
.beat-art{width:110px;height:74px;color:var(--ink-soft);margin-bottom:10px}
.beat p{color:var(--ink-soft);margin:.2em 0 0}
.beat-bad{background:var(--green-dark);border-color:var(--green-dark);color:#fff;display:flex;flex-direction:column;justify-content:center}
.beat-bad p{color:#D8E8CC}
.bad-idea{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;color:var(--pollen);transform:rotate(-2deg);margin:0 0 .2em}
.story-coda{text-align:center;font-family:var(--disp);font-weight:500;font-size:1.15rem;color:var(--ink-soft);
  max-width:600px;margin:44px auto 0}

/* ---------- seed drop ---------- */
#seeddrop{background:var(--bg-soft);max-width:none;border-radius:0}
#seeddrop .section-head,#dropRig{max-width:1180px;margin-left:auto;margin-right:auto}
#dropRig{display:grid;grid-template-columns:minmax(320px,520px) minmax(300px,430px);gap:34px;justify-content:center;align-items:center}
.drop-controls{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:center;
  background:var(--paper);border:2px solid var(--line);border-radius:999px;padding:12px 22px;box-shadow:var(--shadow)}
.drop-controls label{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
#aimSlider{accent-color:var(--green);width:min(220px,40vw)}
.wind-chip{font-family:var(--mono);font-size:.85rem;background:var(--sky-pale);border-radius:999px;padding:6px 14px;color:#1E4E7A}
#windArrow{display:inline-block;font-weight:700}
#dropCanvas{width:100%;max-width:520px;height:auto;background:linear-gradient(180deg,#EAF4FC 0%,#F1F8E9 42%,#E6F1D9 100%);
  border:2px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);touch-action:manipulation}
.drop-readout{display:flex;flex-direction:column;gap:14px}
.drop-verdict{background:var(--paper);border:2px solid var(--line);border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow);min-height:150px}
.drop-verdict.everywhere{border-color:var(--sky);background:#F3F9FF}
.dv-title{font-family:var(--disp);font-weight:800;font-size:1.35rem;margin:0 0 .3em;color:var(--green-dark)}
.drop-verdict.everywhere .dv-title{color:#164876}
.dv-body{color:var(--ink-soft);margin:0}
.drop-tally{font-family:var(--mono);font-size:.85rem;color:var(--ink-soft);margin:0}
.drop-tally b{color:var(--green-deep)}
.drop-legend{font-size:.88rem;color:var(--ink-soft);line-height:1.55;margin:0;
  border-left:3px solid var(--line);padding-left:14px}
.drop-legend b{color:var(--green-dark);font-weight:700}

/* ---------- seedonomics ---------- */
.patch{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:end;
  background:linear-gradient(180deg,#BFE0F7 0%,#DCEDF5 34%,#E9F3DE 58%,#D8E9C6 100%);
  border-radius:var(--radius);padding:34px 26px 34px;border:2px solid var(--line)}
.flower{position:relative;text-align:center;cursor:pointer;border-radius:16px;padding:6px}
.flower-head{position:relative;width:92px;height:92px;margin:0 auto;transition:transform .3s ease}
.flower:hover .flower-head,.flower:focus-visible .flower-head{transform:scale(1.06) rotate(3deg)}
.flower-head .core{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px;background:var(--pollen);border-radius:50%}
.flower-head .ray{position:absolute;left:50%;top:50%;width:2px;height:38px;margin-left:-1px;background:#fff;border-radius:2px;
  transform-origin:top center;box-shadow:0 0 0 .5px rgba(34,50,27,.12)}
.flower-head .ray::after{content:"";position:absolute;bottom:-4px;left:-3px;width:8px;height:8px;background:#fff;border-radius:50%}
.flower.blown .ray{transition:transform .9s ease,opacity .9s ease;transform:translate(var(--fx),var(--fy)) rotate(var(--fr)) !important;opacity:0}
.flower-stem{width:4px;height:64px;background:var(--green);margin:-6px auto 0;border-radius:3px}
.flower-stat{margin:10px 0 0}
.flower-stat b{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(1.05rem,1.9vw,1.5rem);color:var(--green-dark)}
.flower-stat span{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.patch-note{text-align:center;font-family:var(--mono);font-size:.85rem;color:var(--ink-soft);margin-top:22px}

/* ---------- how to buy ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{background:var(--paper);border:2px solid var(--line);border-radius:var(--radius);padding:24px 22px;box-shadow:var(--shadow)}
.step h3{display:flex;align-items:center;gap:10px;font-size:1.08rem}
.step h3 span{background:var(--green-deep);color:#fff;border-radius:50%;width:28px;height:28px;display:inline-flex;
  align-items:center;justify-content:center;font-size:.9rem;flex:none}
.step p{color:var(--ink-soft);font-size:.95rem;margin:.4em 0 0}
.grow{width:80px;height:80px;margin-bottom:6px}
.g-stroke{fill:none;stroke:var(--green);stroke-width:3.4;stroke-linecap:round}
.g-thin{stroke-width:2}
.g-fill{fill:var(--green)}
.g-cream{fill:#E8DFC8}
.g-dot{fill:#fff;stroke:var(--ink-soft);stroke-width:.6}
.step .g-stroke{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1.1s ease .2s}
.step .g-fill,.step .g-dot{opacity:0;transition:opacity .6s ease .8s}
.step.in .g-stroke{stroke-dashoffset:0}
.step.in .g-fill,.step.in .g-dot{opacity:1}
body.shot .step .g-stroke,body.motion-off .step .g-stroke{stroke-dashoffset:0}
body.shot .step .g-fill,body.shot .step .g-dot,body.motion-off .step .g-fill,body.motion-off .step .g-dot{opacity:1}

/* ---------- pollen count ---------- */
#pollenCard{max-width:760px;margin:0 auto;background:var(--paper);border:2px solid var(--line);
  border-radius:var(--radius);padding:26px 30px;box-shadow:var(--shadow)}
.pollen-status{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.88rem;color:var(--ink-soft);margin-bottom:18px}
.p-dot{width:10px;height:10px;border-radius:50%;background:#C9C9B8;flex:none}
#pollenCard[data-state="live"] .p-dot{background:var(--green);animation:pulse 1.6s ease infinite}
#pollenCard[data-state="warming"] .p-dot{background:var(--pollen)}
#pollenCard[data-state="error"] .p-dot{background:var(--red)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(87,179,62,.4)}50%{box-shadow:0 0 0 7px rgba(87,179,62,0)}}
.pollen-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.p-tile{background:var(--bg-soft);border-radius:14px;padding:14px 16px;text-align:center}
.p-label{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.p-tile b{font-family:var(--disp);font-weight:800;font-size:1.15rem;color:var(--green-dark)}
.p-tile b.up{color:var(--green-deep)}
.p-tile b.down{color:var(--red)}
.pollen-foot{font-size:.8rem;color:var(--ink-soft);text-align:center;margin:16px 0 0;font-family:var(--mono)}

/* ---------- garden ---------- */
.beds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.bed{background:var(--paper);border:2px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:flex-start}
.bed-plant{width:86px;height:94px;margin-bottom:4px}
.b-stem{fill:none;stroke:var(--green);stroke-width:4;stroke-linecap:round}
.b-leaf{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round}
.b-core{fill:#E8DFC8}
.b-rays path{stroke:#A9C795;stroke-width:2;stroke-linecap:round}
.b-bud{fill:var(--green)}
.b-soil{fill:#D9CBA8}
.b-seed{fill:#8A6F3C}
.bed-chip{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--bg-soft);border-radius:999px;padding:4px 12px;color:var(--ink-soft);margin-bottom:10px}
.chip-now{background:var(--green-deep);color:#fff;animation:pulse 2s ease infinite}
.bed h3{font-size:1.05rem}
.bed p{color:var(--ink-soft);font-size:.92rem;margin:.3em 0 0}
.bed-now{border-color:var(--green)}

/* ---------- bless ---------- */
#bless{background:var(--green-dark);max-width:none;border-radius:0;color:#fff}
.bless-inner{max-width:720px;margin:0 auto;text-align:center}
#bless .kicker{color:#BFE0A8}
#bless h2{color:#fff}
#bless .section-sub{color:#CFE4BC}
#blessBtn{margin:30px auto 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:168px;height:168px;border-radius:50%;border:0;cursor:pointer;
  background:radial-gradient(circle at 32% 28%,#5CBB44,#3F8A28 58%,#2A5F19);
  box-shadow:0 10px 0 rgba(0,0,0,.28),inset 0 -6px 14px rgba(0,0,0,.18);
  transition:transform .12s ease,box-shadow .12s ease}
#blessBtn:hover{transform:translateY(-3px)}
#blessBtn:active,#blessBtn.pressed{transform:translateY(4px) scale(.97);box-shadow:0 4px 0 rgba(0,0,0,.28),inset 0 -3px 10px rgba(0,0,0,.18)}
.bless-face{font-size:2.4rem}
.bless-word{font-family:var(--disp);font-weight:800;letter-spacing:.1em;color:#fff;font-size:1.3rem}
.bless-meta{font-family:var(--mono);font-size:.9rem;color:#CFE4BC}
.bless-meta b{color:var(--pollen)}
.ritual-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:26px 0 30px}
.ritual-chips span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:999px;
  padding:8px 16px;font-size:.88rem;color:#E4F1D6}
#bless .btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);box-shadow:0 5px 0 rgba(255,255,255,.2)}
#bless .cta-row{justify-content:center}

/* ---------- footer ---------- */
footer{padding:46px 22px 34px;border-top:2px solid var(--line);max-width:1180px;margin:0 auto}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}
.foot-brand{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-weight:700}
.foot-brand img{border-radius:10px}
.foot-icons{display:flex;gap:16px;align-items:center}
.foot-icons a{opacity:.75;transition:opacity .2s,transform .2s}
.foot-icons a:hover{opacity:1;transform:translateY(-2px)}
.disclaimer{font-size:.82rem;color:var(--ink-soft);max-width:760px;line-height:1.6}

/* ---------- paste sprout ---------- */
.sprout{position:fixed;z-index:140;pointer-events:none;font-size:1.8rem;animation:sprout 2.8s ease forwards}
@keyframes sprout{
  0%{transform:scale(0) rotate(-20deg);opacity:0}
  20%{transform:scale(1.25) rotate(6deg);opacity:1}
  35%{transform:scale(1)}
  75%{transform:translateY(-40px) rotate(14deg);opacity:1}
  100%{transform:translateY(-110px) rotate(30deg);opacity:0}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  #hero{grid-template-columns:1fr;padding-top:44px}
  #heroArt img{aspect-ratio:16/9;object-position:12% center}
  .beats{grid-template-columns:1fr 1fr}
  .steps,.beds,.patch{grid-template-columns:1fr 1fr}
  .pollen-grid{grid-template-columns:1fr 1fr}
  #dropRig{grid-template-columns:1fr}
  #dropCanvas{justify-self:center}
}
@media (max-width:760px){
  #navLinks{display:none}
  #nav .nav-right{margin-left:auto}
  #burger{display:flex}
  section{padding:64px 18px}
  .beats{grid-template-columns:1fr}
  .beat-bad{min-height:180px}
}
@media (max-width:560px){
  .steps,.beds{grid-template-columns:1fr}
  .patch{grid-template-columns:1fr 1fr;gap:12px}
  .flower-head{width:78px;height:78px}
  #heroArt img{aspect-ratio:4/3;object-position:15% center}
  #dandyPot{width:60px;right:2%}
  .btn{padding:11px 18px;font-size:.95rem}
  .drop-controls{border-radius:22px}
  #tickleBtn{font-size:.8rem;padding:7px 12px}
}

/* ---------- reduced motion ---------- */
body.motion-off *,body.motion-off *::before,body.motion-off *::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
body.motion-off .chip-now,body.motion-off #pollenCard .p-dot{animation:none}