:root{--cream:#FFF6EA;--ink:#4A3B30;--mute:#7A6A58;--soft:#A8977E;--green:#4A8438;--gdark:#36662A;--gold:#F2B640;--peach:#D0774F}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Nunito,'Segoe UI',system-ui,sans-serif;background-image:radial-gradient(#F3E3CC 1.2px,transparent 1.4px);background-size:22px 22px}
a{color:inherit}
.h{font-family:Fredoka,'Trebuchet MS',sans-serif;font-weight:600;margin:0;line-height:1.05;color:var(--ink)}
.hand{font-family:Caveat,'Comic Sans MS',cursive;font-weight:600;color:var(--peach);line-height:1}
.p{font-size:18px;line-height:1.55;color:var(--mute);margin:0}
.wrap{width:min(1120px,calc(100% - 40px));margin:0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:99px;border:none;background:var(--green);color:#fff;font-family:Fredoka,sans-serif;font-weight:600;font-size:18px;box-shadow:0 5px 0 var(--gdark);cursor:pointer;text-decoration:none}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--gdark)}
/* App Store badge: the SVG already has its own black rounded shape and border, so the link adds nothing around it */
.store{display:inline-block;line-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;height:auto;text-decoration:none}
.store img{display:block;height:48px;width:auto}
nav .links .store img{height:40px}
.chip{min-height:38px;padding:0 14px;border-radius:99px;border:1.5px solid #F1E6D6;background:#fff;font-family:Fredoka,sans-serif;font-weight:600;font-size:14px;color:#7A6A58;cursor:pointer}.chip.on{background:var(--green);color:#fff;border-color:var(--green)}
.sway{transform-box:fill-box;transform-origin:50% 100%}.blink{transform-box:fill-box;transform-origin:50% 50%}.box{transform-box:fill-box;transform-origin:50% 50%}
.fg{opacity:0;transform-box:fill-box;transform-origin:50% 100%}.fg.on{opacity:1}
.potsvg{display:block;overflow:visible}
nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:16px;flex-wrap:wrap}
nav .links{display:flex;align-items:center;gap:22px;font-weight:800;color:var(--mute);font-size:15px;flex-wrap:wrap}nav .links a{text-decoration:none}
/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#FFF6EA 0%,#FFEFD6 100%)}
.hero-in{position:relative;display:flex;gap:40px;align-items:center;padding:70px 0 60px 110px}
.phone{width:330px;height:720px;border-radius:50px;background:#2A2522;padding:10px;box-shadow:0 40px 80px rgba(74,59,48,.35);flex-shrink:0;position:relative;z-index:3}
.screen{width:310px;height:700px;border-radius:40px;overflow:hidden;position:relative;background:#FFF6EA}
.screen .notch{position:absolute;left:50%;top:10px;width:100px;height:28px;margin-left:-50px;border-radius:14px;background:#2A2522;z-index:9}
.today{position:absolute;left:0;top:0;width:390px;height:844px;transform:scale(.795);transform-origin:0 0;padding:54px 16px 0;display:flex;flex-direction:column;gap:12px;background:#FFF6EA;background-image:radial-gradient(#F6E6D0 1.2px,transparent 1.4px);background-size:22px 22px}
.card{background:#fff;border:1px solid #F3EADD;border-radius:26px;box-shadow:0 2px 4px rgba(74,59,48,.05),0 12px 28px rgba(74,59,48,.08)}
.cell{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;border:1.5px dashed #E3D6C0}.cell.done{background:#7FB069;color:#fff;border:none}.cell.now{background:#fff;border:2px solid var(--green);color:var(--green)}
.hright{flex:1;min-width:0;position:relative;z-index:4}
.timeline{position:relative;margin-top:30px;padding-top:6px;max-width:520px}
.timeline .line{position:absolute;left:0;right:70px;top:96px;height:2px;background:linear-gradient(90deg,#E8D8BE,#D8C3A0,#E8D8BE)}
.days{display:flex;align-items:flex-end;gap:2px;padding-right:70px}
.day{flex:1;border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0}
.day svg{transition:all .5s ease;transform-origin:50% 100%;opacity:.18;transform:scale(.9)}.day.done svg{opacity:1;transform:none}.day.now svg{opacity:.55;transform:scale(.96);filter:drop-shadow(0 0 10px rgba(255,214,110,.9))}
.day span{font-size:12px;font-weight:800;letter-spacing:.04em;color:#C4B49C}.day.done span{color:var(--green)}.day.now span{color:var(--peach)}
.next{position:absolute;right:0;top:30px;width:52px;height:52px;border-radius:50%;border:1.5px solid #E8D8BE;background:#FFFDF6;cursor:pointer;color:#8A6C50;font-size:18px;box-shadow:0 6px 14px rgba(74,59,48,.12)}
.note{margin-top:30px;display:flex;gap:22px;align-items:flex-start}
.pill{display:inline-block;padding:5px 12px;border-radius:99px;background:#FFF3D2;color:#A8761C;font-size:13px;font-weight:800}
.mini{position:relative;width:118px;height:160px;flex-shrink:0;border-radius:22px;background:linear-gradient(180deg,#FFF6E4,#FCEBCB)}
.mini svg,.hplant svg{position:absolute;left:0;bottom:0;transition:opacity .45s ease;opacity:0}.mini svg.on,.hplant svg.on{opacity:1}
.sidepot{position:absolute;z-index:4}
.conf{position:absolute;left:50%;top:50%;width:9px;height:12px;border-radius:3px;opacity:0}.boom .conf{animation:confetti 1.7s ease-out both}
.hero .lights{position:absolute;left:50%;top:0;width:1280px;margin-left:-640px;z-index:2;pointer-events:none}
.hero .vines{position:absolute;left:50%;top:0;width:1280px;margin-left:-640px;z-index:1;pointer-events:none}
.grow{animation:growB .55s ease-out}
/* sections */
.sec{padding:90px 0}
.kick{font-size:32px;text-align:center}.title{font-size:48px;text-align:center;margin-top:6px}
.cards3{display:flex;gap:24px;margin-top:50px}.cards3>div{flex:1;border-radius:30px;padding:26px;border:1px solid rgba(255,255,255,.7);box-shadow:0 18px 40px rgba(74,59,48,.12);display:flex;flex-direction:column;gap:10px}.cards3 .art{height:200px;display:flex;align-items:flex-end;justify-content:center}
.gallery{display:flex;justify-content:center;gap:26px;margin-top:50px;align-items:flex-start;overflow-x:auto;padding:30px 10px 50px}
.gphone{display:flex;flex-direction:column;align-items:center;gap:14px;flex-shrink:0}.gphone .fr{width:222px;height:470px;border-radius:36px;background:#2A2522;padding:7px;box-shadow:0 26px 50px rgba(74,59,48,.28)}.gphone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:30px;display:block}
.gold{background:linear-gradient(180deg,#FFF6EA 0%,#FFF0CF 50%,#FFE4A8 100%)}
.gold-in{display:flex;align-items:center;gap:60px}
.goldcard{position:relative;width:520px;height:520px;flex-shrink:0;border-radius:40px;overflow:hidden;background:radial-gradient(circle at 50% 60%,#FFF4C8 0%,#FFE39A 45%,#F5C96A 100%);box-shadow:0 30px 70px rgba(150,100,20,.25)}
.goldpot{position:absolute;left:50%;top:50%;width:250px;height:375px;margin:-220px 0 0 -125px}.goldpot svg{position:absolute;inset:0}
.goldfill{clip-path:inset(100% 0 0 0);filter:sepia(1) saturate(3) hue-rotate(-12deg) brightness(1.08)}
.ring{position:absolute;left:50%;top:58%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:3px solid var(--gold);opacity:0}
.stamp66{position:absolute;left:34px;top:34px;width:132px;height:132px;border-radius:50%;border:5px solid #B8761A;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#B8761A;opacity:0}
.conf66{position:absolute;left:50%;top:50%;width:10px;height:14px;border-radius:3px;opacity:0}
.play66 .goldfill{animation:goldUp 2.2s ease-in-out .3s both}.play66 .ring{animation:ringOut 1.6s ease-out .9s both}.play66 .conf66{animation:confetti 1.8s ease-out both}.play66 .stamp66{animation:stampIn .6s cubic-bezier(.3,1.5,.5,1) 2.2s both}
.sill{display:flex;align-items:flex-end;gap:14px;margin-top:26px;padding:16px 18px;border-radius:22px;background:rgba(255,255,255,.7);border:1px solid #F3E2B5;flex-wrap:wrap}
.goldsvg{filter:sepia(1) saturate(3) hue-rotate(-12deg) brightness(1.08)}
.shop{background:linear-gradient(180deg,#FFF6EA,#FFEFD6)}
.rope{position:relative;margin-top:50px}.rope:before{content:"";position:absolute;left:-20px;right:-20px;top:16px;height:5px;border-radius:3px;background:linear-gradient(180deg,#C9A97C,#A98459);box-shadow:0 2px 4px rgba(80,50,20,.2)}
.packs{display:flex;gap:16px;overflow-x:auto;padding:0 4px 20px;scrollbar-width:thin}
.pack{position:relative;padding-top:16px;width:128px;flex-shrink:0;display:flex;flex-direction:column}
.pack .pin{position:absolute;left:50%;top:0;margin-left:-8px;z-index:3;width:16px;height:36px;border-radius:4px 4px 6px 6px;background:linear-gradient(90deg,#D9B07A,#B98A55);box-shadow:0 2px 3px rgba(80,50,20,.25)}
.pack button,.pack .body{position:relative;z-index:2;text-align:left;cursor:pointer;background:#FFF9EC;border:1px solid #F0E2C6;border-radius:10px 10px 20px 20px;padding:0 10px 12px;display:flex;flex-direction:column;gap:8px;box-shadow:0 2px 4px rgba(74,59,48,.05),0 12px 28px rgba(74,59,48,.08);width:100%}
.pack .crimp{height:15px;margin:0 -10px;border-radius:10px 10px 0 0;background:repeating-linear-gradient(90deg,#EBD9B3 0 5px,#F6EBD0 5px 10px);border-bottom:1px dashed #D8C398}
.pack .win{position:relative;height:140px;border-radius:14px;display:flex;justify-content:center;align-items:flex-end}
.play .g1{animation:fg0 7.2s ease both}.play .g2{animation:fg1 7.2s ease both}.play .g3{animation:fg2 7.2s ease both}.play .g4{animation:fg3 7.2s ease both}.play .g5{animation:fg4 7.2s ease both}.play .g6{animation:fg5 7.2s ease both}.play .g7{animation:fg6 7.2s ease both}.play .g8{animation:fg7 7.2s ease both}
.loop .g1{animation:fg0 7.2s ease infinite}.loop .g2{animation:fg1 7.2s ease infinite}.loop .g3{animation:fg2 7.2s ease infinite}.loop .g4{animation:fg3 7.2s ease infinite}.loop .g5{animation:fg4 7.2s ease infinite}.loop .g6{animation:fg5 7.2s ease infinite}.loop .g7{animation:fg6 7.2s ease infinite}.loop .g8{animation:fg7 7.2s ease infinite}
.pro{position:relative;overflow:hidden;background:linear-gradient(180deg,#2A2552 0%,#4B3B6E 60%,#6B5590 100%);color:#FFF6EA}
.pro-in{display:flex;gap:60px;align-items:center;position:relative;z-index:2}
.nightwin{position:relative;width:520px;height:600px;flex-shrink:0;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45)}.nightwin img{width:100%;height:100%;object-fit:cover;display:block}
.plans{display:flex;gap:12px;margin-top:24px}
.plan{flex:1;position:relative;text-align:left;cursor:pointer;border-radius:20px;padding:16px 18px;background:rgba(255,255,255,.92);border:2px solid transparent;color:var(--ink)}.plan.on{background:#FFF3D2;border-color:var(--gold)}.plan .price{font-size:32px}.plan.on .price{color:#8A5A16}
.tag{position:absolute;top:-12px;left:18px;padding:3px 10px;border-radius:99px;background:var(--gold);color:#5E430B;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.faq{display:flex;gap:60px;align-items:flex-start}.faq details{background:#FFFDF6;border:1px solid #F1E6D6;border-radius:18px;padding:16px 22px;box-shadow:0 2px 4px rgba(74,59,48,.05),0 12px 28px rgba(74,59,48,.08)}.faq summary{cursor:pointer;font-family:Fredoka,sans-serif;font-weight:600;font-size:19px;list-style:none;display:flex;justify-content:space-between}.faq summary:after{content:"+";color:var(--soft);font-size:22px}.faq details[open] summary:after{content:"\2212"}
.close{position:relative;overflow:hidden;background:linear-gradient(180deg,#FFF6EA 0%,#FFEBCF 100%);padding-top:100px;text-align:center}
.closesill{position:relative;height:300px;margin-top:40px}.closesill .plank{position:absolute;left:50%;bottom:40px;width:min(1100px,96%);transform:translateX(-50%);height:26px;border-radius:13px;background:linear-gradient(180deg,#D7AE7E,#B48759);box-shadow:0 16px 30px rgba(80,50,20,.25)}.closesill .pots{position:absolute;left:50%;bottom:62px;transform:translateX(-50%);width:min(1040px,92%);display:flex;justify-content:space-between;align-items:flex-end;overflow:hidden}
footer{background:#3A3029;color:#D9CDBF;padding:34px 0;border-top:6px solid #B48759}footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}footer a{text-decoration:none;font-weight:700;font-size:15px}
.spk{position:absolute;border-radius:50%;background:#FFE49A;box-shadow:0 0 10px 3px rgba(255,214,110,.7)}
@media (prefers-reduced-motion:no-preference){.sway{animation:swayS 4.6s ease-in-out infinite alternate}.blink{animation:blink 4.6s infinite}.spk{animation:twinkle 2.4s ease-in-out infinite}.bulb{animation:glowb 2.2s ease-in-out infinite}.float{animation:floatY 5s ease-in-out infinite}.float2{animation:floatY 6.5s ease-in-out infinite reverse}.bfly{animation:fly 11s ease-in-out infinite}.spin{animation:spin 26s linear infinite}.cloudA{animation:driftA 16s ease-in-out infinite alternate}.cloudB{animation:driftB 20s ease-in-out infinite alternate}.bird{animation:flap 1.1s ease-in-out infinite alternate}.breathe{animation:breathe 3.2s ease-in-out infinite}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@keyframes fg0{0%{opacity:0;transform:scale(.88) translateY(6px)}2.5%{opacity:1;transform:none}8%{opacity:1}11%,100%{opacity:0}}
@keyframes fg1{0%,9.0%{opacity:0;transform:scale(.88) translateY(6px)}11.8%{opacity:1;transform:none}18.0%{opacity:1}21.0%,100%{opacity:0}}
@keyframes fg2{0%,19.0%{opacity:0;transform:scale(.88) translateY(6px)}21.8%{opacity:1;transform:none}28.0%{opacity:1}31.0%,100%{opacity:0}}
@keyframes fg3{0%,29.0%{opacity:0;transform:scale(.88) translateY(6px)}31.8%{opacity:1;transform:none}38.0%{opacity:1}41.0%,100%{opacity:0}}
@keyframes fg4{0%,39.0%{opacity:0;transform:scale(.88) translateY(6px)}41.8%{opacity:1;transform:none}48.0%{opacity:1}51.0%,100%{opacity:0}}
@keyframes fg5{0%,49.0%{opacity:0;transform:scale(.88) translateY(6px)}51.8%{opacity:1;transform:none}58.0%{opacity:1}61.0%,100%{opacity:0}}
@keyframes fg6{0%,59.0%{opacity:0;transform:scale(.88) translateY(6px)}61.8%{opacity:1;transform:none}68.0%{opacity:1}71.0%,100%{opacity:0}}
@keyframes fg7{0%,69%{opacity:0;transform:scale(.8) translateY(8px)}76%{opacity:1;transform:scale(1.07)}84%{transform:scale(.99)}90%,100%{opacity:1;transform:none}}

@keyframes blink{0%,92%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.1)}}
@keyframes swayS{0%{transform:rotate(-1.4deg)}100%{transform:rotate(1.4deg)}}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}
@keyframes glowb{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fly{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(90px,-50px) rotate(8deg)}50%{transform:translate(170px,-10px) rotate(-6deg)}75%{transform:translate(70px,40px) rotate(6deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes growB{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes confetti{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}}
@keyframes goldUp{0%{clip-path:inset(100% 0 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes ringOut{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(9)}}
@keyframes stampIn{0%{opacity:0;transform:rotate(-30deg) scale(2.2)}100%{opacity:1;transform:rotate(-8deg) scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes driftA{0%{transform:translateX(-8px)}100%{transform:translateX(14px)}}@keyframes driftB{0%{transform:translateX(10px)}100%{transform:translateX(-12px)}}
@keyframes flap{0%{transform:scaleY(1)}100%{transform:scaleY(.55)}}
@keyframes breathe{0%,100%{transform:scale(.96);opacity:.75}50%{transform:scale(1.05);opacity:1}}
@media (max-width:960px){
 .hero-in{flex-direction:column;padding:40px 0 50px 0}.hright{width:100%}.title{font-size:36px}.kick{font-size:26px}
 .h1{font-size:54px!important}.cards3{flex-direction:column}.gold-in{flex-direction:column}.goldcard{width:100%;max-width:520px;height:420px}
 .pro-in{flex-direction:column}.nightwin{width:100%;max-width:520px;height:420px}.plans{flex-direction:column}.faq{flex-direction:column}
 .sidepot{display:none}.phone{transform:scale(.9)}.closesill .pots>svg:nth-child(n+6){display:none}
}
@media (max-width:700px){nav .links a{display:none}}
@media (max-width:480px){.h1{font-size:44px!important}.phone{transform:scale(.82);margin:-40px 0}.timeline{max-width:100%}.days{padding-right:60px}.day svg{width:44px;height:64px}}

/* ===== mobile fixes (iPhone widths) ===== */
@media (max-width:960px){
  .gallery{justify-content:flex-start;gap:18px;padding:30px 20px 50px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .gphone{scroll-snap-align:center;transform:none!important}
  .gphone .fr{width:min(232px,64vw);height:auto;aspect-ratio:1179/2556}
  .gphone img{object-fit:contain;background:#FFF6EA}
  .nightwin{width:100%;max-width:520px;height:auto;aspect-ratio:520/600;margin:0 auto}
  .nightwin>div{left:auto!important;top:auto!important;width:26%}
  .nightwin>div:nth-of-type(2){left:22%!important;bottom:7%!important;width:27%}
  .nightwin>div:nth-of-type(3){left:55%!important;bottom:7%!important;width:30%}
  .nightwin>.breathe{left:50%!important;bottom:10%!important;width:50%;aspect-ratio:1;height:auto!important;margin-left:-5%}
  .nightwin>div svg{width:100%!important;height:auto!important}
  .goldcard{aspect-ratio:1;height:auto;max-height:none}
  .goldpot{width:56%;height:auto;aspect-ratio:2/3;top:46%;margin:-36% 0 0 -28%}
  .goldpot svg{width:100%!important;height:100%!important}
  .stamp66{width:96px;height:96px;left:16px;top:16px}.stamp66 .h{font-size:42px!important}.stamp66 .hand{font-size:16px!important}
  .faq>div:first-child{text-align:center}.faq>div:first-child>div:last-child{display:flex;justify-content:center}
}
@media (max-width:700px){
  .timeline .line{right:0}
  .days{padding-right:0}
  .next{position:static;display:block;margin:14px 0 0 auto}
  .timeline{margin-top:20px}
  .note{gap:14px}.mini{width:96px;height:134px}.mini svg{width:90px;height:136px}
  .phone{transform:scale(.9);margin:-36px 0 -36px}
}
@media (max-width:480px){
  .phone{transform:scale(.82);margin:-65px 0 -65px}
  .hero-in{padding-top:20px}
  .sec{padding:64px 0}.title{font-size:32px}.kick{font-size:24px}
  .packs{scroll-snap-type:x proximity}
}



/* ===== mobile fixes 2: hero controls stay with the phone, pots never cut ===== */
.tlcap{display:none}
@media (max-width:960px){
  #screens .title:after{content:"swipe sideways \2192";display:block;font-family:Caveat,'Comic Sans MS',cursive;font-weight:600;font-size:24px;color:var(--peach);margin-top:10px}
  #seeds .title:after{content:"swipe the rope \2192";display:block;font-family:Caveat,'Comic Sans MS',cursive;font-weight:600;font-size:24px;color:var(--peach);margin-top:10px}
  /* golden pot: replay button sits right under the card, and it plays by itself when it comes into view */
  .gold-in{gap:20px}
  .gold-in>div:last-child{display:contents}
  .gold-in>div:last-child>*{order:2}
  .goldcard{order:0}
  #replay66{order:1;align-self:center;margin:2px 0 8px!important}
}
@media (max-width:700px){
  /* hero: heading, phone, then a controls bar that stays on screen while the phone is in view */
  .hero-in{gap:18px;align-items:stretch}
  .hright{display:contents}
  .hero-in>div:first-child{order:3;align-self:center}
  .hright>*:nth-child(1){order:0}.hright>*:nth-child(2){order:1}.hright>*:nth-child(3){order:2}
  .hright>.timeline{order:4}.hright>.note{order:5}.hright>*:nth-child(6){order:6}
  .timeline{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom));z-index:30;margin:0;max-width:none;padding:10px 12px 12px;border-radius:24px;background:rgba(255,249,238,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #F1E3CB;box-shadow:0 12px 32px rgba(74,59,48,.22);display:grid;grid-template-columns:1fr auto;gap:6px 8px;align-items:end}
  .tlcap{display:block;grid-column:1/-1;text-align:center;font-family:Fredoka,sans-serif;font-weight:600;font-size:14px;color:var(--ink)}
  .timeline .line{display:none}
  .days{padding-right:0;gap:0}
  .day svg{width:36px;height:54px}.day span{font-size:11px}
  .next{position:static;margin:0;width:44px;height:44px;font-size:15px;align-self:center}
  .mini{display:none}
  .note{margin-top:0}
  /* closing sill: pots share the width instead of running off the edge */
  .closesill .pots{overflow:visible;width:94%}
  .closesill .pots>svg{width:calc(100% / 5.3);height:auto;flex-shrink:1}
}

/* sticky needs a parent that does not scroll; overflow:clip clips the vines without becoming a scroll container */
@supports (overflow:clip){.hero{overflow:clip}}

/* ===== lights and vines that fit the screen ===== */
.lights-m,.vines-m{display:none}
@media (max-width:700px){
  .hero .lights,.hero .vines{display:none}
  .hero .lights-m,.hero .vines-m{display:block;position:absolute;left:0;top:0;width:100%;height:auto;pointer-events:none;overflow:visible}
  .hero .lights-m{z-index:2}.hero .vines-m{z-index:1}
}
@media (min-width:701px) and (max-width:1279px){
  .hero .lights,.hero .vines{left:0;margin-left:0;width:100%;height:auto}
}

@media (max-width:700px){
  .hero-in{padding-top:98px;position:relative;z-index:3}
  .hero .vines-m{z-index:0}
}



/* ===== site fixes 3: golden-pot pots in one row, night window as crisp vector art ===== */
.nightwin svg.nightsvg{display:block;width:100%;height:100%}
@media (max-width:960px){.nightwin{aspect-ratio:520/470!important}.nightwin svg.nightsvg{height:100%}}
@media (max-width:700px){
  .sill{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;align-items:end;padding:14px 10px}
  .sill>svg{width:100%;height:auto}
  .sill>div{grid-column:1/-1;margin-left:0!important;text-align:center!important;padding-top:6px}
}


/* ===== snowy shelf: live window on the Shelf phone ===== */
.gphone .fr{height:auto!important;aspect-ratio:auto!important}
.gphone .fr img{height:auto!important;object-fit:fill!important;aspect-ratio:1206/2622}
.live{position:relative;border-radius:30px;overflow:hidden}
.live>img{display:block;width:100%;height:auto}
.wcard{position:absolute;left:4.892%;top:26.39%;width:90.05%;height:37.45%;border-radius:3.4%/3.7%;overflow:hidden}
.wcard svg{display:block;width:100%;height:100%}
.wcard.is-off *{animation-play-state:paused!important}

footer .wrap{flex-wrap:wrap;gap:18px}