.hero-jar-rig{position:absolute;left:29%;top:20%;width:44%;aspect-ratio:545/923;z-index:3;transform-origin:50% 80%;pointer-events:none}
.hero-jar-rig .hero-jar,.hero-jar-open{position:absolute;inset:auto 0 0;width:100%;height:100%;object-fit:contain;object-position:center bottom;transform:none}
.hero-jar-open{opacity:0}
.hero-lid{position:absolute;left:50%;top:0;width:100%;height:auto;z-index:7;opacity:0;transform:translateX(-50%);transform-origin:center}
.hero-product .flying-roll{top:0;left:0;width:18%;height:auto;opacity:0;pointer-events:none;transform-origin:50% 50%}
.hero-product .product-note{left:0;right:0;bottom:0;text-align:center;font-size:14px}
.hero.is-live{height:380svh}
.hero.is-rest .hero-jar-open,.hero.is-rest .hero-lid,.hero.is-rest .flying-roll{opacity:0}
.hero.is-rest .hero-jar-closed{opacity:1}
@media(min-width:651px){.hero-product{top:15%;height:76%}.product-disc{inset:18% 7% 8%}}
@media(min-width:1001px){.hero-jar-rig{width:min(44%,32svh);left:calc(50% - min(22%,16svh))}}
@media(min-width:651px) and (max-width:1000px){.hero-jar-rig{top:25%;width:47%;left:27%}}
@media(max-width:650px){.hero.is-live{height:340svh}.hero-product{top:clamp(380px,45svh,440px);height:calc(100svh - 455px);min-height:270px}.hero-jar-rig{top:23%;left:29%;width:44%}.hero-product .product-note{font-size:12px;bottom:-4px}.hero-product .flying-roll{width:18%}.product-disc{inset:16% 7% 8%}}
@media(max-width:650px) and (max-height:760px){.hero-product{top:355px;height:calc(100svh - 410px);min-height:235px}.hero-jar-rig{width:32%;left:34%;top:18%}.hero-copy{top:90px}.hero h1,.hero h2{font-size:42px}.hero-copy p{margin:15px 0;max-width:34ch}.hero-bottom{bottom:7px}}
@media(prefers-reduced-motion:reduce){.hero.is-live{height:auto}.hero-jar-open,.hero-lid,.hero-product .flying-roll{opacity:0!important}.hero-jar-closed{opacity:1!important}}