/* Original images stay untouched; masks remove only the surrounding presentation backdrop. */
/* Homepage sections share one canvas; whitespace provides separation. */
body[data-page=home] .header,
body[data-page=home] .filters,
body[data-page=home] .series-color,
body[data-page=home] .quiz-banner,
body[data-page=home] .compare-section,
body[data-page=home] .compare-invite,
body[data-page=home] .unified-footer,
body[data-page=home] .footer-bottom{border:0}
img[src="/assets/tempest-blue-main-v4.webp"]{--paddle-mask:url("/assets/masks/tempest-blue-main.svg")}
img[src="/assets/tempest-red-main-v4.webp"]{--paddle-mask:url("/assets/masks/tempest-red-main.svg")}
img[src="/assets/tempest-silver-main-v4.webp"]{--paddle-mask:url("/assets/masks/tempest-silver-main.svg")}
img[src="/assets/tempest-blue-secondary-v4.webp"]{--paddle-mask:url("/assets/masks/tempest-blue-secondary.svg")}
img[src="/assets/tempest-red-secondary-v4.webp"]{--paddle-mask:url("/assets/masks/tempest-red-secondary.svg")}
img[src="/assets/tempest-silver-secondary-v4.webp"]{--paddle-mask:url("/assets/masks/tempest-silver-secondary.svg")}
img[src="/assets/equinox-obsidian-main-v4.webp"]{--paddle-mask:url("/assets/masks/equinox-obsidian-main.svg")}
img[src="/assets/equinox-purple-main-v4.webp"]{--paddle-mask:url("/assets/masks/equinox-purple-main.svg")}
img[src="/assets/equinox-blue-main-v4.webp"]{--paddle-mask:url("/assets/masks/equinox-blue-main.svg")}
img[src="/assets/equinox-candy-main-v4.webp"]{--paddle-mask:url("/assets/masks/equinox-candy-main.svg")}
img[src="/assets/equinox-obsidian-secondary-v4.webp"]{--paddle-mask:url("/assets/masks/equinox-obsidian-secondary.svg")}
img[src="/assets/equinox-purple-secondary-v4.webp"]{--paddle-mask:url("/assets/masks/equinox-purple-secondary.svg")}
img[src="/assets/equinox-blue-secondary-v4.webp"]{--paddle-mask:url("/assets/masks/equinox-blue-secondary.svg")}
img[src="/assets/equinox-candy-secondary-v4.webp"]{--paddle-mask:url("/assets/masks/equinox-candy-secondary.svg")}

.series-card{background:transparent;border:0}
.series-card .product-visual{background:transparent}
.pdp-materials{border:0;background:#fff}
.related-item{background:transparent}
.series-card .product-visual img,.materials-image img,.compare-portraits img,.related-item img,.story-depth .story-photo img,body[data-page=home] .compare-pair img{
 mix-blend-mode:normal;mask-image:var(--paddle-mask);mask-size:contain;mask-repeat:no-repeat;mask-position:center;mask-origin:content-box;mask-clip:content-box;
 -webkit-mask-image:var(--paddle-mask);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-origin:content-box;-webkit-mask-clip:content-box;
}

/* Oversized foreground photo crosses the headline plane, like a depth wallpaper. */
body .story.story-depth{position:relative;display:block;height:850px;background:#fff;isolation:isolate;overflow:hidden}
body .story-depth .story-photo{position:absolute;inset:0 35% 0 0;background:transparent;min-height:0;overflow:visible;perspective:1200px;z-index:2}
.story-depth #story-title{position:absolute;z-index:1;left:43%;top:65px;pointer-events:none}
html[lang] .story-depth #story-title{font-size:clamp(90px,9.5vw,155px);font-weight:750;line-height:1.08;letter-spacing:-5px}
.story-paddle{position:absolute;width:1500px;height:1500px;left:4%;top:80%;transform-style:preserve-3d;transform:translate(-50%,calc(-50% + var(--depth-lift,0px))) rotateX(calc(14deg + var(--depth-y,0deg))) rotateY(calc(-24deg + var(--depth-x,0deg))) rotateZ(65deg);filter:drop-shadow(-24px 36px 25px rgba(24,29,33,.19));transition:transform .35s ease-out;pointer-events:none}
.story-depth .story-paddle img{width:100%;height:100%;object-fit:contain}
.story-depth .story-content{position:absolute;z-index:3;left:60%;right:5%;bottom:110px;padding:0}
.story-depth .story-content .section-no{margin-bottom:10px}
.story-depth .story-content h3{margin-top:12px}
@media(min-width:1600px){body .story.story-depth{height:950px}.story-paddle{width:1750px;height:1750px;left:4%}.story-depth .story-content{bottom:130px}}
@media(max-width:1050px) and (min-width:701px){body .story.story-depth{height:740px}.story-paddle{width:1200px;height:1200px;left:-30%;top:80%}.story-depth #story-title{left:38%;top:70px}html[lang] .story-depth #story-title{font-size:85px}.story-depth .story-content{left:55%;right:5%;bottom:75px}.story-depth .story-content h3{font-size:22px}}
@media(max-width:700px){
 body .story.story-depth{height:auto;padding-top:610px}
 body .story-depth .story-photo{inset:0 0 auto;height:610px;perspective:850px}
 .story-depth #story-title{left:24px;top:30px}
 html[lang] .story-depth #story-title{font-size:76px;line-height:1.1;letter-spacing:-3px}
 .story-paddle{width:980px;height:980px;left:-15%;top:90%;transform:translate(-50%,calc(-50% + var(--depth-lift,0px))) rotateX(14deg) rotateY(-24deg) rotateZ(65deg)}
 .story-depth .story-content{position:relative;left:auto;right:auto;bottom:auto;padding:20px 25px 50px;background:#fff}
}
@media(prefers-reduced-motion:reduce){.story-paddle{transition:none}}

.structure-section{background:#fff}
.structure-controls input{accent-color:#22251f}
.structure-meter i{background:#22251f}

.story-depth #story-title span{display:inline-block;margin-left:20px}
html[lang=en] .story-depth #story-title{font-size:clamp(74px,7.2vw,120px);letter-spacing:-3px}
@media(max-width:1050px) and (min-width:701px){.story-depth #story-title span{margin-left:135px}html[lang=en] .story-depth #story-title{font-size:60px}}
@media(max-width:700px){.story-depth #story-title span{margin-left:0}html[lang=en] .story-depth #story-title{font-size:60px}.story-paddle{top:90%}}

/* Fade the foreground into the shared white canvas before the section boundary. */
body .story-depth .story-photo{
 mask-image:linear-gradient(to bottom,#000 0%,#000 65%,rgba(0,0,0,.92) 72%,rgba(0,0,0,.5) 83%,rgba(0,0,0,.12) 93%,transparent 100%);
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 65%,rgba(0,0,0,.92) 72%,rgba(0,0,0,.5) 83%,rgba(0,0,0,.12) 93%,transparent 100%);
}
body[data-page=home] .unified-footer{border-top:0;padding-top:48px}
@media(max-width:700px){
 body .story-depth .story-photo{
  mask-image:linear-gradient(to bottom,#000 0%,#000 64%,rgba(0,0,0,.8) 77%,rgba(0,0,0,.2) 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 64%,rgba(0,0,0,.8) 77%,rgba(0,0,0,.2) 92%,transparent 100%);
 }
 .story-depth .story-content{padding-top:0;padding-bottom:25px}
 body[data-page=home] .unified-footer{padding-top:35px}
}

/* Final editorial pass: a continuous canvas, with only functional borders retained. */
.header,.unified-footer,.footer-bottom,
.pdp-description,.pdp-benefits,.pdp-subnav,
.pdp-materials .tech-details,.pdp-materials .tech-details details,
.pdp-spec dl>div,.box-list>div,.faq-list,.faq-list details,
.structure-step{border:0}
.pdp-box{background:#fff}
.series-facts{padding-top:22px}
.compare-invite h2{margin-bottom:30px}
.newsletter .btn{margin-top:24px}
.structure-step{padding-top:0;margin-top:28px;min-height:120px}
.structure-step p:empty{visibility:hidden}
.structure-step p{font-size:14px;color:var(--ink)}
.structure-controls>div,.structure-controls button{font-size:11px}
.structure-caption{font-size:10px}
@media(max-width:700px){
 .structure-step{margin-top:18px;min-height:90px}
 .structure-step p{font-size:12px}
 .structure-controls>div,.structure-controls button{font-size:10px}
 .structure-controls{top:calc(100% + 282px)}
}