/* Homepage carousel only. Its copy, artwork and controls each have their own space. */
.rx-home-spotlight .hh-carousel{
  container:homepage-banner / inline-size;
  height:178px!important;
  border:1px solid #385776;
  border-radius:12px;
  background:#0c1829;
}
.rx-home-spotlight .hh-carousel .cx-campaign-track{
  height:100%;border:0;border-radius:inherit;
}
.rx-home-spotlight .hh-carousel .cx-campaign-slide{
  height:100%!important;box-sizing:border-box;
}
.rx-home-spotlight .hh-carousel .cx-campaign-slide:after{display:none}
.hh-carousel .hh-brand{
  display:flex;align-items:center;
  background:radial-gradient(ellipse at 87% 42%,#28589470,transparent 62%),linear-gradient(115deg,#0b192b,#142743);
}
.hh-brand-copy{position:relative;z-index:2;width:calc(100% - 210px);padding:18px 24px;min-width:0}
.hh-brand-label{display:flex;align-items:center;gap:7px;color:#bbd9ff;font-size:11px;line-height:1.2;font-weight:750;letter-spacing:.09em;white-space:nowrap}
.hh-brand-label img{width:17px;height:17px}
.hh-brand-copy h2{font:750 clamp(24px,3.9cqw,34px)/1.08 Manrope,Inter,sans-serif;letter-spacing:-.9px;color:#f5f8ff;margin:8px 0 6px;text-wrap:balance}
.hh-brand-copy h2 span{color:#a8d5ff;white-space:nowrap}
.hh-brand-copy p{font-size:12px;line-height:1.4;color:#d4e5fc;margin:0 0 10px}
.hh-brand-cta{display:inline-flex;align-items:center;justify-content:center;gap:14px;background:linear-gradient(115deg,#c0dbff,#91bdfa);border:1px solid #d8e8ff70;box-shadow:inset 0 1px #fff3,0 4px 14px #0003;color:#0e2442;font-size:12px;font-weight:750;line-height:1.2;min-height:34px;padding:8px 12px;border-radius:7px;white-space:nowrap}
.hh-brand-cta:hover{filter:brightness(1.1)}
.hh-brand-cta svg{flex:none}
.hh-brand-art{position:absolute;width:120px;height:120px;right:62px;top:22px;border:1px solid #86c4ff4a;border-radius:50%;background:radial-gradient(circle,#356db244,transparent 65%);box-shadow:0 0 45px #5b9ee526}
.hh-brand-art>img{position:absolute;width:44px;height:44px;inset:0;margin:auto;filter:drop-shadow(0 0 18px #6bafff70);animation:hh-gem-float 7s ease-in-out infinite}
.hh-brand-art>i{position:absolute;inset:15px;border:1px dashed #9acaff4a;border-radius:50%;animation:rx-orbit 45s linear infinite}
.hh-brand-art>i+i{inset:-13px;border-style:solid;opacity:.45;animation-direction:reverse}
.hh-brand-art>span{position:absolute;left:calc(50% + 58px * cos(var(--n) * 90deg));top:calc(50% + 58px * sin(var(--n) * 90deg));transform:translate(-50%,-50%);display:grid;place-items:center;padding:7px;background:#142d4b;border:1px solid #668fbd88;border-radius:9px}
.hh-brand-art .ex-logo,.hh-brand-art .ex-fallback{width:24px;height:24px;min-width:24px}
.rx-home-spotlight .hh-carousel .cx-campaign-controls{top:auto!important;bottom:8px!important;right:10px!important;transform:none!important;height:22px;padding:2px 4px;border-color:#46617c80;background:#081525e6;gap:5px}
.hh-carousel .cx-campaign-controls>div{gap:5px}
.hh-carousel .cx-campaign-controls [data-campaign-dot]{height:4px;width:12px}
.hh-carousel .cx-campaign-controls [data-campaign-dot][aria-pressed=true]{width:21px}
.hh-carousel .cx-campaign-controls [data-campaign-pause]{height:18px;width:21px;font-size:10px}
.rx-home-spotlight .hh-carousel .hh-project{padding:18px 24px!important;align-items:center}
.hh-carousel .hh-project .rx-promoted-copy{width:calc(100% - 195px);min-width:0}
.hh-carousel .hh-label{font-size:11px!important;line-height:1.2;letter-spacing:.04em;gap:7px;white-space:nowrap}
.hh-carousel .hh-project .rx-promoted-identity{display:flex;flex-direction:row;align-items:center;gap:12px;margin:11px 0}
.hh-carousel .hh-project .rx-promoted-identity .cr-avatar{width:44px;height:44px;flex:none;border-radius:12px}
.hh-carousel .hh-project .rx-promoted-identity>span:last-child{min-width:0}
.hh-carousel .hh-project .rx-promoted-identity strong{max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(22px,3.5cqw,30px);line-height:1.15}
.hh-carousel .hh-project .rx-promoted-identity b{font-size:13px;line-height:1.3;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}
.hh-carousel .hh-badge{font-size:11px;padding:5px 7px}
.hh-carousel .hh-project .rx-promoted-open{font-size:12px;line-height:1.3;margin:0 0 0 12px;display:inline-flex}
.hh-carousel .hh-project .rx-promoted-visual{display:grid;width:132px;height:132px;right:60px;top:12px;opacity:1}
.hh-carousel .hh-project .rx-promoted-visual .cr-avatar{width:78px;height:78px;border-radius:21px}
@container homepage-banner (max-width:640px){
  .hh-brand-copy{width:calc(100% - 155px);padding:16px 18px}
  .hh-brand-copy h2{font-size:26px;letter-spacing:-.65px}
  .hh-brand-art{right:32px;top:18px;width:112px;height:112px}
  .hh-brand-art>span{left:calc(50% + 55px * cos(var(--n) * 90deg));top:calc(50% + 55px * sin(var(--n) * 90deg));padding:5px}
  .hh-brand-art .ex-logo,.hh-brand-art .ex-fallback{width:21px;height:21px;min-width:21px}
  .hh-carousel .hh-project .rx-promoted-copy{width:calc(100% - 125px)}
  .hh-carousel .hh-project .rx-promoted-visual{right:24px;width:110px;height:110px;top:21px}
  .hh-carousel .hh-project .rx-promoted-open{margin:8px 0 0;display:flex}
  .hh-carousel .hh-project .rx-promoted-identity strong{font-size:23px}
}
@container homepage-banner (max-width:400px){
  .hh-brand-copy{width:100%;padding:14px}
  .hh-brand-copy h2{font-size:23px;max-width:230px;margin:9px 0 12px}
  .hh-brand-copy p{display:none}
  .hh-brand-art{right:-45px;top:24px;opacity:.15;pointer-events:none}
  .hh-brand-label{font-size:10px;gap:5px;letter-spacing:.025em}
  .hh-brand-label img{width:14px;height:14px}
  .hh-brand-cta{font-size:11px;gap:8px;min-height:32px;padding:7px 10px}
  .hh-carousel .hh-project .rx-promoted-copy{width:100%}
  .hh-carousel .hh-project .rx-promoted-identity strong{font-size:21px}
  .hh-carousel .hh-project .rx-promoted-visual{display:none}
  .hh-carousel .hh-project .rx-promoted-identity{gap:8px;margin:10px 0}
  .hh-carousel .hh-project .rx-promoted-identity .cr-avatar{width:36px;height:36px;border-radius:10px}
  .hh-carousel .hh-label{font-size:10px!important;gap:5px}
}
@container homepage-banner (max-width:230px){
  .hh-brand-copy{padding:12px 12px 27px}
  .hh-brand-copy h2{font-size:18px;line-height:1.1;letter-spacing:-.45px;margin:8px 0 10px;max-width:none}
  .hh-brand-copy h2 span{white-space:normal}
  .hh-brand-label{font-size:9px;gap:5px}
  .hh-brand-label img{width:12px;height:12px}
  .hh-brand-cta{font-size:10px;gap:5px;padding:7px;min-height:29px}
  .hh-brand-cta svg{width:12px;height:12px}
  .hh-carousel .hh-project .rx-promoted-copy{padding-bottom:17px}
  .hh-carousel .hh-project .rx-promoted-identity{gap:7px;margin:10px 0}
  .hh-carousel .hh-project .rx-promoted-identity .cr-avatar{width:29px;height:29px;border-radius:8px}
  .hh-carousel .hh-project .rx-promoted-identity strong{font-size:16px}
  .hh-carousel .hh-project .rx-promoted-identity b{font-size:10px}
  .hh-carousel .hh-label{font-size:9px!important;letter-spacing:0;gap:4px}
  .hh-carousel .hh-label svg{width:11px;height:11px}
  .hh-carousel .hh-badge{font-size:9px;padding:4px 5px}
  .hh-carousel .hh-project .rx-promoted-open{font-size:10px;margin-top:7px}
  .hh-carousel .hh-project .rx-promoted-open svg{width:12px;height:12px}
}
@media(max-width:760px){
  .rx-home-spotlight .hh-carousel{height:174px!important}
  .rx-home-spotlight .hh-carousel .hh-project{padding:12px!important}
  .rx-home-spotlight .hh-carousel .cx-campaign-controls{bottom:6px!important;right:7px!important}
}
@media(prefers-reduced-motion:reduce){.hh-brand-art>img,.hh-brand-art>i{animation:none}}
@keyframes hh-gem-float{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-5px) rotate(7deg)}}
