/* Approved Allocation Prism hero. All component styles are isolated from the landing content. */
.hero-with-prism{overflow:clip}
.hero-with-prism .hero-in>:first-child{position:relative;z-index:1}
.hero-stage.hero-prism{position:relative;width:100%;max-width:620px;min-height:0;aspect-ratio:620/710;margin-inline:auto;isolation:isolate}
.hp-scene{position:absolute;inset:0 auto auto 0;width:620px;height:710px;transform:scale(var(--hp-scale,1));transform-origin:0 0;isolation:isolate}
.hp-ambient{position:absolute;inset:-15px -25px 0;pointer-events:none;z-index:0;overflow:hidden}
.hp-light{position:absolute;animation:hp-light 28s ease-in-out infinite alternate;pointer-events:none}
.hp-light-teal{width:600px;height:520px;left:6px;top:178px;background:radial-gradient(ellipse,#1d8a841c 0%,#1d8a8410 30%,#1d8a8400 68%)}
.hp-light-amber{width:480px;height:450px;left:230px;top:0;background:radial-gradient(ellipse,#f0b43119 0%,#f2c0ad12 32%,#f0b43100 68%);animation-delay:-14s;animation-duration:34s}
.hp-canvas{position:absolute;left:-64px;top:-64px;width:748px;height:838px;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent),linear-gradient(0deg,transparent 64px,#000 128px,#000 calc(100% - 128px),transparent calc(100% - 64px));
  mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent),linear-gradient(0deg,transparent 64px,#000 128px,#000 calc(100% - 128px),transparent calc(100% - 64px));
  -webkit-mask-composite:source-in;mask-composite:intersect}
.hp-device{position:absolute;top:104px;width:234px}
.hp-frame{position:relative;padding:3.5px;background:linear-gradient(115deg,#465257 0%,#182327 20%,#101a1e 65%,#2c3a40 100%);border-radius:30px;border:1px solid #17252b}
.hp-front{left:338px;z-index:3;animation:hp-float-front 12s ease-in-out infinite;--screen-top:linear-gradient(90deg,#f7f6f2 0%,#f8f4f0 25%,#e7ebec 50%,#d2e3e6 75%,#cee5e4 90%,#d5eae5 100%)}
.hp-front .hp-frame{transform:rotate(8deg);box-shadow:-1px 0 0 #829399,-2px 1px 0 #263940,8px 16px 27px -18px #102f3c5c,0 1px 1px #9aa8ad77 inset}
.hp-back{left:62px;z-index:2;animation:hp-float-back 15s ease-in-out infinite;animation-delay:-6s;--screen-top:linear-gradient(90deg,#f2f2f4 0%,#ebeaf1 10%,#e3e1ef 25%,#ecebf2 50%,#f3f3f3 76%,#f3f3f3 100%)}
.hp-back .hp-frame{transform:rotate(-8deg);box-shadow:1px 0 0 #829399,2px 1px 0 #263940,7px 16px 25px -20px #102f3c4d,0 1px 1px #9aa8ad77 inset}
.hp-screen{position:relative;border-radius:25px;overflow:hidden;background:var(--screen-top);outline:1px solid #173d482b}
.hp-safe-area{position:relative;height:24px;z-index:1}
.hp-safe-area::after{content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:6px;background:var(--screen-top);-webkit-mask-image:linear-gradient(#000 0%,#000 35%,transparent 100%);mask-image:linear-gradient(#000 0%,#000 35%,transparent 100%);pointer-events:none}
.hp-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:96px;height:17px;background:linear-gradient(#142126,#111b1f);border-radius:0 0 12px 12px;box-shadow:0 1px 0 #34464c66}
.hp-speaker{position:absolute;left:34px;top:7px;width:22px;height:2px;background:#536369;border-radius:2px}
.hp-camera{position:absolute;right:20px;top:6px;width:4px;height:4px;border-radius:50%;background:#173d50;box-shadow:0 0 0 1px #26383f,0 0 0 2px #0d181d}
/* A shared display ratio keeps equal-height phones; cover crops ~39 source pixels at the top of At-a-glance. */
.hp-viewport{position:relative;aspect-ratio:391/840;overflow:hidden}
.hp-viewport>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;border-radius:0}
.hp-shadow{position:absolute;top:654px;z-index:1;border-radius:50%;background:radial-gradient(ellipse at center,#14384a66 0%,#14384a30 30%,#14384a0e 53%,#14384a00 73%);filter:blur(5px)}
.hp-shadow-front{left:294px;width:248px;height:34px;opacity:.8;transform:rotate(4deg);animation:hp-shadow-front 12s ease-in-out infinite}
.hp-shadow-back{left:95px;width:240px;height:32px;opacity:.6;transform:rotate(-4deg);animation:hp-shadow-back 15s ease-in-out infinite;animation-delay:-6s}
@media (min-width:881px){
  .hero-stage.hero-prism{aspect-ratio:620/730}
  .hp-scene{height:730px}
  .hp-device{top:40px;width:274px}
  .hp-back{left:25px}
  .hp-front{left:321px}
  .hp-shadow{top:660px}
  .hp-shadow-back{left:62px;width:275px}
  .hp-shadow-front{left:291px;width:275px}
}
.hero-prism[data-running=false] :is(.hp-light,.hp-device,.hp-shadow){animation-play-state:paused}
.hero-prism[data-static=true] :is(.hp-light,.hp-device,.hp-shadow){animation:none}
@keyframes hp-light{0%{transform:translate(-12px,6px) scale(.97);opacity:.7}100%{transform:translate(16px,-9px) scale(1.035);opacity:1}}
@keyframes hp-float-front{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes hp-float-back{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes hp-shadow-front{0%,100%{scale:1;opacity:.8}50%{scale:.94;opacity:.64}}
@keyframes hp-shadow-back{0%,100%{scale:1;opacity:.6}50%{scale:.95;opacity:.49}}
@media(prefers-reduced-motion:reduce){.hero-prism :is(.hp-light,.hp-device,.hp-shadow){animation:none}}
@media print{.hero-prism :is(.hp-light,.hp-device,.hp-shadow){animation:none}}