/* Reference-specific hero refinements. */
@media(min-width:801px){
.hero-shell{width:min(1536px,100%,calc(100svh * 1.5))}
.hero-canvas .hero-headline{left:24%;top:11.4%;width:59.5%}
.hero-canvas h1{transform:rotate(-3deg)}
.hero-canvas .headline-first{font-family:RoadRage,sans-serif;font-size:8.5cqw;line-height:.96;letter-spacing:-.13cqw;transform:skew(-7deg);-webkit-text-stroke:.55cqw #080808;filter:drop-shadow(.25cqw .4cqw 0 #080808)}
.hero-canvas .brush-line{font-family:RoadRage,sans-serif;font-size:7.6cqw;line-height:1;letter-spacing:.05cqw;padding:.1cqw 1.3cqw .65cqw;margin:.25cqw auto 0;transform:skew(-7deg)}
.hero-canvas .review-card{left:11.7%;top:50.5%;width:22%;padding:1.55cqw 1.8cqw 1.15cqw}
.hero-canvas .shoreline{height:51%;width:100%;object-fit:fill;clip-path:polygon(0 0,71% 0,71% 92%,100% 92%,100% 100%,0 100%)}
.hero-canvas .from-art{top:39.5%}
.hero-canvas .to-label{font-family:RoadRage,sans-serif;font-size:3.2cqw;line-height:.85;left:35.2%;top:39%;width:12.1%;padding:.7cqw .2cqw;transform:rotate(-13deg)}
.hero-canvas .pink-arrow-art{left:34.2%;top:54%;width:12%}
.hero-canvas .hand-note{left:34.7%;top:76%;font-family:RoadRage,sans-serif;font-size:2.9cqw;line-height:.85}
.hero-canvas .corner-sticker{font-family:RoadRage,sans-serif;font-size:3.4cqw;line-height:.85}
}

@media(min-width:801px){
.hero-canvas .hero-headline{top:12.8%;left:24.6%;width:59%}
.hero-canvas .headline-first{font-family:Knewave,sans-serif;font-size:4.4cqw;line-height:1.35;letter-spacing:-.05cqw;transform:skew(-7deg) scaleY(1.65);transform-origin:50% 100%;-webkit-text-stroke:.42cqw #080808;filter:drop-shadow(.2cqw .3cqw 0 #080808)}
.hero-canvas .brush-line{font-family:Marker,sans-serif;font-size:4.65cqw;line-height:1.15;margin-top:1cqw;padding:.5cqw 1cqw .8cqw;transform:skew(-10deg) scaleY(1.32);transform-origin:50% 0}
.hero-canvas .shoreline{left:-1.5%;width:86%;height:47%;clip-path:none}
.hero-canvas .shoreline-tail{position:absolute;left:0;bottom:-1%;width:100%;height:47%;object-fit:fill;clip-path:polygon(78% 92%,100% 92%,100% 100%,78% 100%);z-index:0;pointer-events:none}
.hero-canvas .to-label{font-family:Marker,sans-serif;font-size:1.9cqw;line-height:1.02;top:40%;padding:.7cqw .2cqw}
.hero-canvas .hand-note{font-family:Marker,sans-serif;font-size:1.65cqw;line-height:1.07;transform:rotate(-12deg) skew(-6deg) scaleY(1.15);left:34.8%;top:77%}
}
@media(max-width:800px){.shoreline-tail{display:none}}

.hero-canvas .ad-art::after{display:none}
.hero-canvas .ad-art>img{object-fit:fill;object-position:center}
.hero-canvas .brush-line::before{background:transparent url('assets/cyan-brush.png') center/100% 100% no-repeat;clip-path:none;inset:-2.2cqw -5.5cqw -1.5cqw;transform:rotate(3deg)}
.hero-canvas .burst{display:none}
.hero-canvas .corner-sticker{background:none;clip-path:none;border-radius:0;overflow:visible;transform:none;padding:0}
.hero-canvas .corner-sticker>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:url(#ink-alpha)}
.hero-canvas .corner-sticker>span{position:absolute;inset:21% 6% 19%;font-family:Marker,sans-serif;font-size:1.65cqw;line-height:1.03;transform:rotate(-12deg) skew(-8deg) scaleY(1.23);text-align:center}
@media(min-width:801px){
.hero-canvas .hero-headline{top:12%;height:16cqw}
.hero-canvas .headline-first{position:absolute;top:2cqw;left:0;width:100%;line-height:1.15}
.hero-canvas .brush-line{position:absolute;top:7.7cqw;left:2%;width:96%;font-size:4.35cqw;line-height:1.1;padding:.1cqw .5cqw .5cqw;margin:0;transform:skew(-9deg) scaleY(1.14);white-space:nowrap;text-align:center}
.hero-canvas .corner-sticker{top:0;right:-.8%;width:12.8%;height:34%}
.hero-canvas .to-label{top:41%;left:35.3%;font-size:1.62cqw;width:11.5%;line-height:1.06;padding:.6cqw .2cqw}
.hero-canvas .hand-note{font-size:1.45cqw;left:33%;top:76%;width:12.5%;transform:rotate(-12deg) skew(-6deg) scaleY(1.15)}
.hero-canvas .shoreline-tail{clip-path:polygon(78% 96%,100% 96%,100% 100%,78% 100%)}
.hero-canvas .relationship{position:relative;background:var(--cream)}
}
@media(max-width:800px){
.hero-canvas .brush-line::before{inset:-2cqw -3cqw -1cqw}
.hero-canvas .ad-art>img{object-fit:fill}
}

.hero-canvas .brush-line::before{background-size:100% 240%;inset:-1cqw -5.5cqw -1cqw}
.hero-canvas .corner-sticker>span{inset:28% 6% 12%}
@media(max-width:800px){.hero-canvas .brush-line::before{background-size:100% 180%;inset:-1cqw -3cqw}}
