.why-moneva {
  --spread-x: min(32vw, 610px);
  --spread-y: min(10vw, 192px);
  padding: clamp(64px, 5.2vw, 100px) 0 clamp(48px, 4vw, 76px);
  background: #fff;
  overflow: hidden;
}
.why-moneva > .section-kicker {
  font: 400 clamp(15px, 1.12vw, 22px)/1.5 'Geist', sans-serif;
  text-align: center;
  color: #536174;
  margin: 0 0 12px;
}
.why-moneva > h2 {
  font: 500 clamp(40px, 4.45vw, 85px)/1.02 'Schibsted Grotesk', sans-serif;
  letter-spacing: -.045em;
  text-align: center;
  color: #1d2939;
  margin: 0 20px;
}
.why-stage {
  position: relative;
  width: 100%;
  max-width: 1906px;
  height: min(43vw, 820px);
  margin: clamp(60px, 5.2vw, 100px) auto 0;
  isolation: isolate;
}
.why-backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  color: #f0f1f3;
  font: 400 min(20.3vw, 387px)/1 'Geist', sans-serif;
  letter-spacing: -.03em;
  padding-bottom: 5%;
  user-select: none;
  mask-image: linear-gradient(transparent, #000 22%, #000 88%, transparent);
}
.why-phone {
  position: absolute;
  inset: 0;
  overflow: hidden;
  mask-image: linear-gradient(transparent, #000 19%, #000 88%, transparent);
}
.why-phone img {
  position: absolute;
  width: 76%;
  max-width: none;
  left: 50%;
  top: -9.1vw;
  transform: translateX(-50%);
}
.why-cards { position: absolute; inset: 0; }
.why-card {
  position: absolute;
  width: min(17.35vw, 331px);
  aspect-ratio: 1.025;
  top: 45%;
  left: 50%;
  border-radius: clamp(10px, .8vw, 16px);
  overflow: hidden;
  background: #f5f5f5;
  box-shadow: 0 24px 35px -14px #0004;
  transform: translate(calc(-50% + var(--end-x)), calc(-50% + var(--end-y))) rotate(var(--angle));
  transition: transform 1500ms cubic-bezier(.22, .8, .22, 1), box-shadow 1500ms ease;
  transition-delay: var(--delay);
}
.why-card > img { width: 100%; height: 100%; object-fit: cover; }
.why-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 28%, #0005 52%, #000e 100%); }
.why-card-copy { position: absolute; z-index: 1; left: 7%; right: 6%; bottom: 6%; color: #fff; }
.why-card h3 { color: #fff; font: 400 clamp(15px, 1.24vw, 24px)/1.16 'Geist', sans-serif; letter-spacing: -.035em; margin: 0 0 8px; }
.why-card p { font: 400 clamp(12px, 1.01vw, 19.3px)/1.24 'Geist', sans-serif; margin: 0; letter-spacing: -.02em; color: #efefef; }
.why-simple { --end-x: calc(-1 * var(--spread-x)); --end-y: calc(-1 * var(--spread-y)); --angle: 4deg; --delay: 0ms; z-index: 5; }
.why-fast { --end-x: var(--spread-x); --end-y: calc(-1 * var(--spread-y)); --angle: -5deg; --delay: 70ms; z-index: 2; }
.why-human { --end-x: calc(-1 * var(--spread-x)); --end-y: var(--spread-y); --angle: -4deg; --delay: 120ms; z-index: 3; }
.why-secure { --end-x: var(--spread-x); --end-y: var(--spread-y); --angle: 4deg; --delay: 180ms; z-index: 4; }
.why-moneva.is-stacked .why-card { transform: translate(-50%, -50%) rotate(var(--angle)); box-shadow: 0 28px 35px -15px #0006; transition: none; }
@media (min-width: 1906px) { .why-phone img { top: -174px; } }
@media (max-width: 700px) {
  .why-moneva { --spread-x: 24vw; --spread-y: 160px; padding-top: 70px; }
  .why-moneva > h2 { font-size: clamp(33px, 6.5vw, 45px); letter-spacing: -.045em; }
  .why-stage { height: 680px; margin-top: 50px; }
  .why-phone img { width: 950px; top: -80px; }
  .why-phone { opacity: .42; }
  .why-backdrop { justify-content: center; gap: 200px; font-size: 23vw; }
  .why-card { width: 42vw; max-width: 255px; aspect-ratio: .8; top: 50%; }
  .why-card h3 { font-size: 16px; }
  .why-card p { font-size: 13px; line-height: 1.3; }
  .why-card-copy { left: 9%; right: 8%; bottom: 7%; }
}
/* This card entrance is explicitly requested even with OS Reduce Motion on.
   Other site animations retain their existing reduced-motion behavior. */
