/* Customer dashboard hero replacement. Scoped: no changes to account cards,
   navigation, product lists, wallets, payments or other pages. */
.numera-shell .numera-58-campaign{width:100%;min-width:0}
.numera-shell .numera-58-films{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.numera-shell .numera-58-film{position:relative;isolation:isolate;min-width:0;aspect-ratio:16/10;
  overflow:hidden;border-radius:18px;border:1px solid #49415d;background:#100f21;
  box-shadow:0 10px 24px rgba(0,0,0,.12)}
.numera-shell .numera-58-film video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.numera-shell .numera-58-film-action{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:flex-end;gap:9px;width:100%;text-align:left;
  padding:18px;color:#fff;border:0;cursor:pointer;background:linear-gradient(180deg,transparent 44%,rgba(8,7,22,.94) 100%);
  font:inherit}
.numera-shell .numera-58-film-action>span{font-size:clamp(17px,1.75vw,23px);font-weight:850;
  letter-spacing:-.025em;text-shadow:0 2px 7px rgba(0,0,0,.7)}
.numera-shell .numera-58-film-action>strong{display:inline-flex;align-items:center;gap:8px;
  color:#fff;border:1px solid rgba(194,150,255,.72);border-radius:999px;
  background:rgba(89,49,146,.87);padding:8px 14px;font-size:12px;font-weight:750}
.numera-shell .numera-58-film-action:hover>strong,.numera-shell .numera-58-film-action:focus-visible>strong{
  background:#8054bb;border-color:#e8d3ff}
.numera-shell .numera-58-film-action:focus-visible{outline:3px solid #ba9ffa;outline-offset:-4px}
.numera-shell .numera-58-development{position:relative;isolation:isolate;overflow:hidden;
  min-width:0;min-height:clamp(290px,35vw,415px);border:1px solid #4f4268;border-radius:22px;
  display:flex;align-items:center;background:#100c22;color:#fff}
.numera-shell .numera-58-development>video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;pointer-events:none;z-index:0}
.numera-shell .numera-58-development:before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,9,25,.99) 0%,rgba(13,9,31,.92) 34%,rgba(17,9,36,.45) 71%,rgba(10,7,24,.16) 100%);
  z-index:1;pointer-events:none}
.numera-shell .numera-58-development-content{position:relative;z-index:2;padding:clamp(24px,4vw,48px);
  max-width:630px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.numera-shell .numera-58-development-eyebrow{font-size:11px!important;font-weight:800;
  letter-spacing:.2em;color:#d3b5ff!important;margin:0!important}
.numera-shell .numera-58-development h2{color:#fff!important;font-weight:850;
  font-size:clamp(30px,4.3vw,57px);line-height:1.05;letter-spacing:-.045em;margin:0}
.numera-shell .numera-58-development-notice{color:#fff!important;
  font-size:clamp(14px,1.45vw,18px);font-weight:710;line-height:1.4;margin:0!important}
.numera-shell .numera-58-development-detail{color:#dad0eb!important;max-width:390px;
  font-size:13px;line-height:1.6;margin:0!important}
.numera-shell .numera-58-development .numera-button-primary{margin-top:9px;
  min-height:44px;background:#7048a7!important;color:#fff!important;
  border:1px solid #b48ce7!important;border-radius:12px}
@media (max-width:900px){
  .numera-shell .numera-58-films{gap:10px}
  .numera-shell .numera-58-film{aspect-ratio:4/4}
  .numera-shell .numera-58-film-action{padding:12px}
  .numera-shell .numera-58-film-action>strong{padding:7px 10px;font-size:11px}
}
@media (max-width:640px){
  .numera-shell .numera-58-films{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-inline:1px;padding:0 0 7px;overscroll-behavior-x:contain}
  .numera-shell .numera-58-film{flex:0 0 min(85vw,350px);aspect-ratio:16/11;scroll-snap-align:start}
  .numera-shell .numera-58-development{min-height:380px;align-items:flex-end}
  .numera-shell .numera-58-development:before{
    background:linear-gradient(0deg,rgba(11,9,25,.99) 0%,rgba(13,9,31,.89) 55%,rgba(17,9,36,.25) 100%)}
  .numera-shell .numera-58-development>video{object-position:60% center}
  .numera-shell .numera-58-development-content{padding:22px;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .numera-shell .numera-58-film video,.numera-shell .numera-58-development>video{animation:none}
}


/* Development preview: dedicated visible media, not a dim banner background. */
.numera-shell .numera-58-development {
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center;
  gap:clamp(14px,2.5vw,30px);
  padding:clamp(18px,2.4vw,30px);
  min-height:clamp(290px,32vw,420px);
  background:radial-gradient(ellipse at 78% 52%,#332051 0%,#150f29 46%,#0d0a1d 100%);
}
.numera-shell .numera-58-development:before {display:none}
.numera-shell .numera-58-development-content {
  max-width:none;min-width:0;z-index:2;padding:clamp(8px,1.8vw,24px);
}
.numera-shell .numera-58-development-media {
  display:block;position:relative;z-index:2;min-width:0;width:100%;
  aspect-ratio:16/9;background:#130d27;
  border:1px solid rgba(190,145,255,.5);border-radius:18px;overflow:hidden;
  box-shadow:0 16px 35px rgba(3,2,13,.45);
}
.numera-shell .numera-58-development-media>video {
  display:block;width:100%;height:100%;object-fit:cover;
  background:#130d27 url("/assets/customer-cinematics/app-development-cinematic-poster.jpg")
    center/cover no-repeat;
}
.numera-shell .numera-58-development-video-label {
  position:absolute;top:12px;left:12px;pointer-events:none;
  padding:7px 11px;border-radius:999px;
  color:#fff;background:rgba(14,10,30,.79);border:1px solid rgba(205,173,250,.55);
  font:800 10px/1.2 system-ui,sans-serif;letter-spacing:.11em;
}
@media(max-width:800px){
  .numera-shell .numera-58-development {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media(max-width:640px){
  .numera-shell .numera-58-development {
    display:flex;flex-direction:column;align-items:stretch;
    min-height:0;padding:14px;gap:10px;
  }
  .numera-shell .numera-58-development-media {
    order:0;width:100%;aspect-ratio:16/9;border-radius:14px;
  }
  .numera-shell .numera-58-development-content {
    order:1;align-items:flex-start;padding:12px 7px 8px;gap:10px;
  }
}

/* Approved original animated GIF: no video fallback, crop or color overlay. */
.numera-shell .numera-58-development-media>.numera-58-development-gif {
  display:block;width:100%;height:100%;object-fit:contain;object-position:center;
  background:radial-gradient(ellipse at 50% 50%,#231340 0%,#0a091c 78%);
}