@font-face{font-family:FreshRound;src:url('/demos/freshcan/assets/chewy.ttf');font-display:swap;font-weight:400}
h1,h2,.logo{font-family:FreshRound,sans-serif;font-weight:400;letter-spacing:-.8px}.hand{font-family:Fresh,cursive;font-weight:700}.logo{line-height:.82;font-size:34px;letter-spacing:-1.4px}.logo>span{right:-10px;font-size:10px;bottom:2px}
header{height:64px;top:20px;padding:10px 12%;border-radius:15px}.hero{height:460px;min-height:460px;padding:110px 14% 42px}.hero-copy{max-width:58%;width:640px}.hero h1{font-size:clamp(54px,5.5vw,85px);line-height:.91}.hero-copy>p{font-size:24px;margin:15px 0 21px}.hero-features{gap:18px;margin-bottom:18px}.hero-features small{font-size:11px}.hero-note{top:44%;right:6%;font-size:28px}.hero:after{background:linear-gradient(90deg,#f5fafb90,transparent 55%)}.hero>picture img{object-position:center center}.benefits{margin:-8px 1.5% 0;padding:21px 7%;border-radius:18px 18px 0 0}.moments article{height:215px}.moments h2{font-size:25px}.products{padding:20px 10% 22px;gap:24px;grid-template-columns:.85fr 1.65fr 1.25fr}.product-intro h2{font-size:42px;line-height:.92;position:relative}.product-intro h2 .green-marks{position:absolute;right:5px;top:0}.product-intro p{font-size:15px;margin:12px 0 15px}.formats{gap:9px}.formats img{height:150px}.formats article:nth-child(2) img{height:175px}.formats article:nth-child(3) img{height:200px}.formats p{margin:3px 0 8px}.formats button{font-size:10px;padding:5px 10px}.badge{width:49px;height:49px;font-size:8px}.natural{min-height:174px;border-radius:16px}.natural h3{font-size:30px}.natural ul{font-size:11px;gap:8px;padding:14px 10px}.natural li{gap:6px}.natural li:before{width:15px;height:15px}footer{min-height:185px;height:185px;padding:26px 12%;gap:12%}footer>h2{font-size:38px}.footer-card{padding:18px 25px;border-radius:17px}.footer-card .logo{font-size:34px}.footer-links{bottom:8px;font-size:9px}.info-close{position:absolute;right:15px;top:12px;font-size:28px;z-index:2}.info-dialog{width:min(760px,92vw);padding:25px}.info-dialog .story,.info-dialog .contact{margin:15px 0}.info-dialog .story>div{padding:30px}.info-dialog h2{font-size:38px}.green-marks{width:28px;height:32px;margin-left:8px;vertical-align:top}.green-marks:before,.green-marks:after{width:24px;height:6px}.green-marks:before{top:10px}.green-marks:after{top:23px;left:9px}
@media(min-width:701px) and (max-width:1100px){header{padding:10px 4%}.hero{padding-left:8%;padding-right:8%;height:420px;min-height:420px}.hero h1{font-size:58px}.hero-copy>p{font-size:21px}.hero-features{display:grid;grid-template-columns:1fr 1fr;max-width:320px}.hero-note{font-size:21px;right:3%}.products{padding:25px 5%;grid-template-columns:.8fr 1.4fr}.natural{grid-column:1/-1;min-height:145px;width:75%}.moments h2{font-size:20px}.product-intro h2{font-size:36px}.hero-copy{max-width:58%}}
@media(max-width:700px){header{height:64px;padding:10px 20px;top:auto}.logo{font-size:29px}.bag svg{width:23px;height:23px}.count{min-width:15px;height:15px;font-size:9px}.bag{gap:4px}.toggle{width:29px}.toggle i{width:23px}.nav-open nav{inset:64px 0 0}.hero{height:clamp(265px,68vw,360px);min-height:0;padding:24px 16px 20px}.hero h1{font-size:clamp(29px,7.7vw,42px);line-height:.94;letter-spacing:-.6px;white-space:nowrap}.hero-copy{width:65%;max-width:65%}.hero-copy>p{font-size:clamp(13px,3.5vw,18px);line-height:1.2;margin:10px 0 13px;white-space:nowrap}.hero-features{max-width:100%;gap:10px 8px;margin:0 0 13px}.hero-features>span{gap:5px}.hero-features small{font-size:clamp(7px,1.9vw,10px);line-height:1.3}.hero-features svg{width:20px;height:20px}.hero .button{min-height:31px;padding:6px 13px;font-size:10px;gap:12px}.hero .button span{font-size:17px}.hero-note{top:27px;bottom:auto;right:12px;font-size:clamp(12px,3.3vw,17px);transform:rotate(-12deg);text-shadow:none;max-width:85px}.hero>picture img{object-position:67% center}.hero:after{background:linear-gradient(90deg,#fafcffc7 0%,#fafcff85 31%,transparent 61%)}.hero .green-marks{width:20px;height:24px}.hero .green-marks:before,.hero .green-marks:after{width:19px;height:5px}.hero .green-marks:before{top:7px}.hero .green-marks:after{top:18px;left:7px}.benefits{padding:18px 7px 16px;margin:-4px 0 0;gap:0;border-radius:12px 12px 0 0}.benefits article{padding:0 5px}.benefits svg{width:28px;height:28px;margin-bottom:6px}.benefits h3{font-size:10px;line-height:1.15;margin-bottom:4px}.benefits p{font-size:9px;line-height:1.25}.moments{padding:0 8px;gap:5px}.moments article{height:clamp(100px,26vw,150px);border-radius:8px}.moments .friends{height:clamp(120px,31vw,170px)}.moments .splash{height:clamp(85px,22vw,125px)}.moments h2{font-size:19px;left:12px;bottom:12px;line-height:.94}.moments .hand-can h2{font-size:16px;right:10px;top:14px}.moments .padel h2{font-size:16px;left:12px;bottom:12px}.moments .padel img{object-position:65% center}.moments .hand-can img{object-position:25% center}.underline{height:4px;margin-top:5px}.products{grid-template-columns:34% minmax(0,1fr);gap:12px 8px;padding:16px 10px 10px;align-items:center}.product-intro{display:block;min-width:0}.product-intro h2{font-size:clamp(23px,6vw,32px);line-height:.92;letter-spacing:-.6px}.product-intro h2 .green-marks{right:-3px;top:-10px;transform:scale(.65);transform-origin:right center}.product-intro p{font-size:clamp(9px,2.5vw,12px);line-height:1.2;margin:8px 0}.product-intro .button{font-size:8px;line-height:1.1;gap:5px;min-height:25px;padding:6px 8px;white-space:nowrap;margin:0}.product-intro .button span{font-size:12px}.formats{gap:2px;align-self:end}.formats img{height:95px}.formats article:nth-child(2) img{height:115px}.formats article:nth-child(3) img{height:135px}.formats h3{font-size:11px;margin-top:3px}.formats p{font-size:8px;line-height:1.15;margin:2px 0 5px;min-height:18px}.formats button{font-size:8px;padding:4px 7px;gap:6px}.badge{width:35px;height:35px;font-size:6px;top:1px;right:-1px}.natural{grid-column:1/-1;min-height:100px;height:100px;grid-template-columns:1.1fr 1fr;border-radius:10px}.natural h3{font-size:25px;top:12px;left:24px;line-height:.92}.natural ul{font-size:9px;padding:9px 10px;gap:5px;line-height:1.15}.natural li:before{width:12px;height:12px;font-size:9px}.natural li{gap:5px}footer{height:150px;min-height:150px;display:flex;padding:18px 14px 25px;gap:10px}footer>h2{font-size:25px;line-height:1.02;width:48%;flex-shrink:0}.footer-card{width:52%;margin:0;padding:12px 11px;gap:11px;border-radius:11px}.footer-card .logo{font-size:23px}.footer-card p{font-size:9px;margin-bottom:7px}.footer-card .button{font-size:8px;min-height:24px;padding:4px 9px;gap:6px}.footer-card .button span{font-size:13px}.footer-links{font-size:7px;left:14px;right:14px;bottom:7px}.info-dialog .story{grid-template-columns:1fr}.info-dialog .story>div{padding:25px 18px}.info-dialog .story img{height:180px}.info-dialog h2{font-size:32px}}

.logo>span{display:none}.product-intro h2 .green-marks{right:auto;left:175px}.formats{position:relative;isolation:isolate}.formats:before{content:'';position:absolute;z-index:-1;left:-20px;right:-20px;top:25px;bottom:65px;background:url('/demos/freshcan/assets/product-stage.webp') center bottom/100% 100% no-repeat}.formats article{z-index:1}
@media(min-width:1101px){.hero>picture img{object-fit:fill}.hero{height:480px;min-height:480px;padding-top:125px}header{top:15px;height:60px}}
@media(max-width:700px){.product-intro h2 .green-marks{left:100px;right:auto}.formats:before{left:-5px;right:-5px;top:15px;bottom:50px}.hero-copy{animation:none}.hero-note{right:10px;top:20px;max-width:80px}}

@media(min-width:1101px){.hero>picture{background:#bce4fb}.hero>picture img{top:60px;height:450px;object-fit:fill}}

.hero-copy{animation:none!important}.formats:before{mix-blend-mode:multiply;mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 96%,transparent)}@media(max-width:700px){.footer-card p{font-size:10px}.footer-card .button{font-size:9px}}

/* Match the supplied phone composition rather than a stacked catalog. */
@media(max-width:700px){
.hero{height:clamp(270px,64vw,390px);padding:22px 16px 18px;min-height:0}
.hero>picture{inset:0;height:100%}.hero>picture img{top:0;height:100%;object-fit:cover;object-position:66% center}
.hero-copy{width:65%;max-width:65%}.hero h1{font-size:clamp(30px,7.4vw,43px);line-height:.94}
.hero-copy>p{font-size:clamp(13px,3.4vw,18px);margin:10px 0 12px;line-height:1.2}
.hero-features{gap:9px 8px;margin-bottom:12px}.hero-features small{font-size:clamp(7px,1.9vw,10px)}
.hero-note{font-size:clamp(13px,3.3vw,18px);top:30px;right:12px;max-width:90px}
.benefits{padding:18px 8px 20px}.benefits h3{font-size:11px}.benefits p{font-size:10px}
.moments .friends{height:33vw;min-height:125px}.moments article{height:28vw;min-height:108px}.moments .splash{height:22vw;min-height:90px}
.products{padding:14px 10px 10px;grid-template-columns:34% minmax(0,1fr);gap:12px 8px}
.product-intro h2{font-size:clamp(23px,6vw,34px)}.product-intro h2 .green-marks{left:100px;top:-7px}
.product-intro p{font-size:clamp(9px,2.45vw,13px);margin:9px 0;line-height:1.22}
.formats{gap:3px}.formats article{background:none;border:0;padding:0;border-radius:0}
.formats img{height:24vw;max-height:155px;object-fit:contain;background:none}.formats article:nth-child(2) img{height:28vw;max-height:175px}.formats article:nth-child(3) img{height:32vw;max-height:195px}
.formats h3{font-size:11px}.formats p{font-size:9px;margin-bottom:0;min-height:22px}.formats button{display:none}
.formats article{cursor:pointer}.formats:before{bottom:31px;top:20px}
.badge{width:36px;height:36px;border-radius:50%;font-size:6px;padding:0;display:grid;place-content:center}.badge{max-width:40px;white-space:normal;text-align:center}
.natural{height:105px;margin-top:0}.natural ul{font-size:10px;gap:5px}.natural h3{font-size:25px}
footer{height:155px;min-height:155px;padding:18px 14px 25px}.footer-card{padding:13px 12px;gap:12px}.footer-card p{font-size:10px}.footer-card .button{font-size:9px}
}
.formats button{display:none}.formats article{cursor:pointer}.formats article:focus-visible{outline:3px solid var(--green);outline-offset:5px}.product-intro>a{display:inline-flex}

@media(max-width:700px){.hero h1{font-size:clamp(33px,8.3vw,46px)}.moments .friends img{object-position:center center}.formats:before{bottom:33px}.product-intro h2 .green-marks{left:110px}}