/* R103: full artwork and wider desktop content. Checkout keeps its own geometry. */
.hero-art{display:block;pointer-events:none}
.home-page .hero-art img{display:block;width:100%;height:auto;max-width:none;filter:none;image-rendering:auto}
@media(min-width:701px){
 .home-page .container{width:min(94%,1800px)}
 .home-page .header-row{width:min(94%,1740px)}
 .home-page .hero{display:grid;align-items:center;isolation:isolate;aspect-ratio:1930 / 815;min-height:0;width:100%;padding:0;background:#06090e;overflow:hidden}
 .home-page .hero-art{position:absolute;inset:0;z-index:-1}
 .home-page .hero-art img{width:100%;height:100%;object-fit:contain;object-position:center}
 .home-page .hero::before{display:none}
 .home-page .hero-copy{width:min(48%,760px);max-width:none}
 .home-page .hero h1{white-space:normal}
 .home-page .hero-text{max-width:calc(425 * var(--s))}
 .home-page #features,.home-page #how-it-works,.home-page #pricing{min-height:0}
 .home-page .section{padding-top:calc(30 * var(--s));padding-bottom:calc(28 * var(--s))}
 .home-page .feature-card-media img,.home-page .feature-card-media video{height:auto;aspect-ratio:2.45 / 1;object-fit:cover}
 .home-page .feature-card p{font-size:calc(12 * var(--s))}
 .home-page .feature-card-copy{padding-bottom:calc(21 * var(--s))}
 .home-page .feature-grid,.home-page .pricing-grid{gap:calc(24 * var(--s))}
 .home-page .two-col{column-gap:calc(32 * var(--s))}
 .home-page .pricing-card{min-height:calc(291 * var(--s))}
 .home-page .footer-grid{grid-template-columns:2.15fr .95fr 1.2fr 1.25fr}
}
@media(min-width:801px){
 .pricing-page main{width:min(94%,1800px)}
 .pricing-page .topbar{padding-inline:max(3%,calc((100% - 1740px)/2))}
 .pricing-page .pricing-footer{padding-left:max(4%,calc((100% - 1680px)/2));padding-right:max(4%,calc((100% - 1680px)/2))}
 .pricing-page::before{height:clamp(360px,33.35vw,683px);background-image:linear-gradient(90deg,#080b0d 26%,transparent 70%),linear-gradient(180deg,transparent 38%,rgba(8,11,13,.3) 66%,#080b0d 100%),url('/assets/reference/pricing-background-r107.png');background-size:100% 100%,100% 100%,min(100%,2048px) auto;background-position:0 0,0 0,right top;background-repeat:no-repeat}
 .pricing-page .configurator{grid-template-columns:minmax(0,1.39fr) minmax(0,1fr)}
 .pricing-page .section-head>p{max-width:calc(400 * var(--r))}
 .pricing-page .plans{gap:calc(18 * var(--r))}
}
@media(min-width:701px) and (max-width:1000px){
 .home-page .hero-copy{width:57%}
 .home-page .hero-text{max-width:100%}
 .home-page .hero{min-height:430px;aspect-ratio:auto}
 .home-page .hero-art{display:flex;align-items:flex-end}
 .home-page .hero-art img{height:auto;object-fit:contain}
 .home-page .hero-grid{padding-block:28px}
}
@media(max-width:700px){
 .home-page .hero{display:flex;flex-direction:column;padding:0;background:#080b0d;min-height:0}
 .home-page .hero::before{display:none}
 .home-page .hero-grid{order:0;padding-top:34px;padding-bottom:20px}
 .home-page .hero-art{order:1;position:static;width:100%;margin:0}
 .home-page .hero-art img{height:auto;aspect-ratio:1930 / 815;object-fit:contain}
 .home-page .hero-copy{width:100%;max-width:none}
}
@media(max-width:800px){.pricing-page::before{height:340px;background-image:linear-gradient(90deg,#080b0dcc,#080b0d55),linear-gradient(180deg,transparent 30%,#080b0d 100%),url('/assets/reference/pricing-background-r107.png');background-size:100% 100%,100% 100%,auto 260px;background-position:0 0,0 0,right top}}
@media(min-width:701px){.home-page .hero h1{font-size:clamp(36px,3.5vw,68px)}}

/* R104: blend the lower hero into the storefront, keeping the artwork above sharp. */
.home-page .hero{border-bottom:0}
.home-page .hero-grid{z-index:2}
@media(min-width:701px){
 .home-page .hero{margin-bottom:calc(-1 * clamp(64px,7vw,144px));overflow:visible}
 .home-page .hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  background:linear-gradient(180deg,transparent 45%,rgba(8,11,13,.12) 60%,rgba(8,11,13,.65) 77%,rgba(8,11,13,.96) 93%,#080b0d 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.3) 64%,#000 91%);
  mask-image:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.3) 64%,#000 91%)}
 .home-page #features{position:relative;z-index:1;background:linear-gradient(180deg,transparent,#080b0d 90px)}
}
@media(max-width:700px){
 .home-page .hero{margin-bottom:-24px}
 .home-page .hero-art{position:relative}
 .home-page .hero-art::after{content:"";position:absolute;inset:35% 0 0;pointer-events:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  background:linear-gradient(180deg,transparent 10%,rgba(8,11,13,.55) 65%,#080b0d 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000);mask-image:linear-gradient(180deg,transparent,#000)}
 .home-page #features{position:relative;z-index:1}
}
/* Keep the pricing art atmospheric behind the purchase interface. */
.pricing-page::before{filter:blur(.5px);opacity:.70;
 -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9) 0%,#000 18%,rgba(0,0,0,.9) 40%,rgba(0,0,0,.5) 72%,transparent 100%);
 mask-image:linear-gradient(180deg,rgba(0,0,0,.9) 0%,#000 18%,rgba(0,0,0,.9) 40%,rgba(0,0,0,.5) 72%,transparent 100%)}
@media(min-width:701px) and (max-width:1000px){.home-page .hero{margin-bottom:-32px}}

/* R105: navigation remains aligned after removing the redundant header CTA. */
.pricing-page .topbar nav{margin-right:0;padding-left:0}

/* R123: mobile uses the artwork behind the hero copy, with a soft lower transition. */
@media(max-width:700px){
 .home-page .hero{display:grid;align-items:center;position:relative;isolation:isolate;overflow:hidden;min-height:520px;margin-bottom:-24px;padding:0;background:#080b0d}
 .home-page .hero-art{position:absolute;inset:0;order:initial;width:100%;height:100%;margin:0;z-index:0}
 .home-page .hero-art img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:69% center}
 .home-page .hero-art::before{display:none}
 .home-page .hero::before{content:"";display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,11,13,.87),rgba(8,11,13,.55)),linear-gradient(180deg,rgba(8,11,13,.12) 0%,transparent 55%,#080b0d 100%)}
 .home-page .hero-grid{position:relative;z-index:2;order:initial;padding-top:38px;padding-bottom:68px}
 .home-page .hero-art::after{inset:60% 0 0;z-index:1}
}

/* R124: continue the hero behind the navigation, softly revealing it downward. */
.home-page .site-shell{position:relative}
.home-page .site-header{position:absolute;inset:0 0 auto;z-index:30;background:transparent;border-bottom:0}
.home-page .hero-art::before{content:"";display:block;position:absolute;inset:0 0 auto;height:clamp(170px,12vw,230px);z-index:1;pointer-events:none;
 -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
 background:linear-gradient(180deg,rgba(8,11,13,.94) 0%,rgba(8,11,13,.68) 30%,rgba(8,11,13,.14) 70%,transparent 100%);
 -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 18%,rgba(0,0,0,.72) 50%,transparent 100%);
 mask-image:linear-gradient(180deg,#000 0%,#000 18%,rgba(0,0,0,.72) 50%,transparent 100%)}

/* R128: one sharp pricing image, with the homepage's masked blur treatment. */
.pricing-page::before,.pricing-page::after{display:none}
.pricing-page .topbar{background:transparent;border-bottom-color:transparent}
.pricing-page .pricing-art{position:absolute;inset:0 0 auto;height:clamp(360px,33.35vw,683px);z-index:-1;pointer-events:none;opacity:1;filter:none;
 background-image:linear-gradient(90deg,#080b0d 26%,transparent 70%),url('/assets/reference/pricing-background-r107.png');
 background-size:100% 100%,min(100%,2048px) auto;background-position:0 0,right top;background-repeat:no-repeat}
.pricing-page .pricing-art::before{content:"";display:block;position:absolute;inset:0 0 auto;height:clamp(170px,12vw,230px);z-index:1;pointer-events:none;
 -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
 background:linear-gradient(180deg,rgba(8,11,13,.94) 0%,rgba(8,11,13,.68) 30%,rgba(8,11,13,.14) 70%,transparent 100%);
 -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 18%,rgba(0,0,0,.72) 50%,transparent 100%);
 mask-image:linear-gradient(180deg,#000 0%,#000 18%,rgba(0,0,0,.72) 50%,transparent 100%)}
.pricing-page .pricing-art::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
 background:linear-gradient(180deg,transparent 45%,rgba(8,11,13,.12) 60%,rgba(8,11,13,.65) 77%,rgba(8,11,13,.96) 93%,#080b0d 100%);
 -webkit-mask-image:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.3) 64%,#000 91%);
 mask-image:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.3) 64%,#000 91%)}
@media(max-width:800px){
 .pricing-page .pricing-art{height:340px;
  background-image:linear-gradient(90deg,rgba(8,11,13,.87),rgba(8,11,13,.55)),url('/assets/reference/pricing-background-r107.png');
  background-size:100% 100%,auto 340px;background-position:0 0,right top}
 .pricing-page .pricing-art::after{inset:60% 0 0;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  background:linear-gradient(180deg,transparent 10%,rgba(8,11,13,.55) 65%,#080b0d 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000);mask-image:linear-gradient(180deg,transparent,#000)}
}