.notification-panel {
  position: relative;
  grid-template-columns: 38% 62%;
  padding: 0 74px 0 28px;
}

.notification-panel .message-visual {
  height: 580px;
  align-items: center;
  overflow: visible;
}

.notification-panel .message-visual img.notification-phone-art {
  display: block;
  width: min(300px, 88%);
  max-height: 540px;
  height: auto;
  margin: 0;
  border-radius: 0;
  filter: drop-shadow(0 18px 18px rgba(57, 39, 47, 0.2));
  object-fit: contain;
}

.notification-panel .message-copy {
  position: relative;
  z-index: 2;
  padding: 36px 32px 24px;
}

.notification-bear-art {
  display: block;
  width: 190px;
  height: auto;
  margin: 18px auto 0;
  object-fit: contain;
  pointer-events: none;
}

@media (max-width: 900px) {
  .notification-panel {
    grid-template-columns: 40% 60%;
    padding-right: 38px;
  }
  .notification-panel .message-visual img.notification-phone-art {
    width: min(270px, 90%);
  }
  .notification-panel .message-copy {
    padding: 32px 24px 22px;
  }
  .notification-bear-art {
    width: 165px;
    margin-top: 14px;
  }
}

@media (max-width: 600px) {
  .notification-panel {
    grid-template-columns: 1fr;
    padding: 0 18px 42px;
  }
  .notification-panel .message-visual {
    height: 390px;
  }
  .notification-panel .message-visual img.notification-phone-art {
    width: auto;
    max-width: 82%;
    max-height: 365px;
    margin-top: 14px;
  }
  .notification-panel .message-copy {
    padding: 25px 8px 0;
  }
  .notification-bear-art {
    width: 140px;
    margin: 18px auto 0;
  }
}

/* A single glint after the whole phone clears the sticky header. */
.notification-phone{position:relative;display:block;flex:0 0 auto;width:min(300px,88%);aspect-ratio:941 / 1672}
.notification-panel .message-visual .notification-phone img.notification-phone-art{width:100%;max-width:none;max-height:none;height:auto;margin:0}
.phone-shine{position:absolute;inset:4.1% 13.7% 7.5%;overflow:hidden;border-radius:15% / 7%;pointer-events:none;mix-blend-mode:screen}
.phone-shine::before{content:"";position:absolute;top:-30%;left:-120%;width:70%;height:160%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1) 25%,rgba(255,255,255,.8) 50%,rgba(255,247,226,.15) 75%,transparent);transform:translateX(0) skewX(-20deg);opacity:0}
.phone-sparkle{position:absolute;right:8%;top:5%;width:11%;aspect-ratio:1;background:#fff9e8;clip-path:polygon(50% 0,59% 40%,100% 50%,59% 60%,50% 100%,41% 60%,0 50%,41% 40%);filter:drop-shadow(0 0 5px #fff4cd);opacity:0;pointer-events:none}
.notification-phone.is-shining .phone-shine::before{animation:phone-glint 1.15s ease-in-out .12s both}
.notification-phone.is-shining .phone-sparkle{animation:phone-sparkle 1.1s ease-in-out .4s both}
@keyframes phone-glint{0%{transform:translateX(0) skewX(-20deg);opacity:0}15%{opacity:.9}75%{opacity:.85}100%{transform:translateX(360%) skewX(-20deg);opacity:0}}
@keyframes phone-sparkle{0%,100%{transform:scale(.25) rotate(-15deg);opacity:0}40%{transform:scale(1) rotate(0);opacity:1}65%{transform:scale(.8) rotate(10deg);opacity:.8}}
@media(max-width:900px){.notification-phone{width:min(270px,90%)}}
@media(max-width:600px){.notification-phone{width:min(205px,82%);margin-top:14px}}
@media(prefers-reduced-motion:reduce){.notification-phone.is-shining .phone-shine::before,.notification-phone.is-shining .phone-sparkle{animation:none}.phone-shine,.phone-sparkle{display:none}}