/* Banner assets retain their native copy-safe composition rather than a card crop. */
body[data-brand="loyal-primus"] .background-hero {
 position:relative;isolation:isolate;display:grid;align-items:center;
 width:100%;max-width:none;min-height:clamp(740px,56.25vw,1080px);
 margin:0;padding:150px 0 96px;overflow:hidden;background:#000;
}
body[data-brand="loyal-primus"] .background-hero .banner-copy {position:relative;z-index:2;pointer-events:none}
.banner-text{width:44%;max-width:620px;pointer-events:auto}
.banner-text h1{font-size:clamp(48px,5.2vw,78px);line-height:1.04;letter-spacing:-.055em;margin:22px 0 28px}
.banner-text>p:not(.eyebrow){max-width:520px;color:#c4c4c4;font-size:18px;line-height:1.65}
.banner-text .button-row{justify-content:flex-start;gap:12px;flex-wrap:wrap;margin-top:32px}
.banner-text>.button{margin-top:28px}
.banner-text :is(.funding-caption,.banner-caption){font-size:13px!important;line-height:1.65;margin-top:22px;color:#a8a8a8}
.background-hero .banner-media{position:absolute;z-index:0;inset:0;pointer-events:none;border:0;border-radius:0;background:none;overflow:visible;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.banner-media :is(video,img,picture){display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;margin:0;border:0;border-radius:0}
.background-hero::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(90deg,#000 2%,#000e 24%,transparent 57%)}
.banner-motion{position:absolute;z-index:3;right:max(var(--site-gutter),calc((100% - var(--site-max))/2));bottom:34px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #666;border-radius:50%;background:#171719d9;color:#fff;font-size:19px;cursor:pointer}
.banner-motion[hidden]{display:none}.banner-motion:focus-visible{outline:2px solid #fff;outline-offset:5px}
.cashback-banner .banner-media{left:35%;width:65%}
/* The original globe is portrait artwork; dissolve its edges into the banner. */
.partnership-program-banner .banner-media{left:40%;mask-image:linear-gradient(90deg,transparent,#000 18%),linear-gradient(transparent,#000 14%,#000 82%,transparent);mask-composite:intersect}
.partnership-program-banner .banner-media img{object-position:right center}
.copy-trade-banner .banner-media{left:26%;mask-image:linear-gradient(90deg,transparent,#000 16%),linear-gradient(transparent,#000 16%,#000 83%,transparent);mask-composite:intersect}
/* Fade the rendered image bounds, not the outer letterbox. */
.service-main:has(>.background-hero:first-child){padding-top:0}
.cashback-banner .banner-media video{position:absolute;top:50%;height:auto;transform:translateY(-50%);mask-image:linear-gradient(#000 76%,transparent)}
.partnership-program-banner .banner-media img{width:auto;height:100%;margin-left:auto;mask-image:linear-gradient(90deg,transparent,#000 22%),linear-gradient(transparent,#000 22%,#000 84%,transparent);mask-composite:intersect}
.copy-trade-banner .banner-media picture{position:relative}
.copy-trade-banner .banner-media img{position:absolute;top:50%;height:auto;transform:translateY(-50%);mask-image:linear-gradient(transparent,#000 20%,#000 88%,transparent)}
@media(max-width:1000px){
 body[data-brand="loyal-primus"] .background-hero{display:block;min-height:0;padding:130px 0 min(110vw,770px)}
 .banner-text{width:100%;max-width:600px}
 .banner-text h1{font-size:clamp(42px,7vw,60px)}
 .banner-text>p:not(.eyebrow){font-size:16px;max-width:560px}
 .banner-media :is(video,img){object-fit:contain;object-position:center bottom}
 .background-hero::after{background:none}
 .banner-text .button-row{margin-top:26px}
 .banner-motion{bottom:22px}
}
@media(max-width:480px){
 body[data-brand="loyal-primus"] .background-hero{padding-top:116px}
 .banner-text h1{font-size:clamp(38px,10.7vw,48px)}
 .banner-text :is(.funding-caption,.banner-caption){font-size:12px!important}
}
/* Tablet artwork keeps its native ratio, with a bounded scale and feathered edges. */
@media(max-width:1000px){
 body[data-brand="loyal-primus"] .cashback-banner{padding-bottom:min(135vw,760px)}
 .background-hero .banner-media{left:50%;right:auto;bottom:0;top:auto;transform:translateX(-50%);width:min(100%,700px);height:auto;aspect-ratio:9/16;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 24%,#000 88%,transparent);mask-composite:intersect}
 .cashback-banner .banner-media{width:min(100%,600px);aspect-ratio:1080/2336}
 .partnership-program-banner .banner-media,.copy-trade-banner .banner-media{aspect-ratio:1440/2032}
 .partnership-program-banner .banner-media img{mask-image:linear-gradient(transparent,#000 23%,#000 84%,transparent)}
 .background-hero .banner-media :is(video,img){position:static;width:100%;height:100%;transform:none;object-fit:contain;margin:0}
}